@disy/cadenza.js 10.3.0 → 10.3.2

package/cadenza.js

@@ -12,7 +12,7 @@
  */
 // This placeholder is replaced when Cadenza JS is released,
 // i.e. during development, the version is not available.
-const CADENZAJS_VERSION = '10.3.0';
+const CADENZAJS_VERSION = '10.3.2';
 /**
  * Creates an instance of the Cadenza JS client.
  *
@@ -95,9 +95,10 @@ globalThis.cadenza = Object.assign((/** @type Parameters<cadenza> */ ...args) =>
  */
 /** @typedef {'normal'|'simplified'} OperationMode - The mode in which a workbook should be operated */
 /**
- * @typedef {'workbook-design'|'workbook-map-add-layer'|'workbook-view-management'} UiFeature - The name of a Cadenza UI feature
+ * @typedef {'geometry-edit-translate'|'workbook-design'|'workbook-map-add-layer'|'workbook-view-management'} UiFeature - The name of a Cadenza UI feature
  *
  * _Note:_ Supported features are:
+ * * `"geometry-edit-translate"` - Enables translation interactions when editing geometries
  * * `"workbook-design"` - The workbook designer
  * * `"workbook-map-add-layer"`- Add layers to the map
  * * `"workbook-view-management"` - Add/Edit/Remove workbook views (Is included in 'workbook-design'.)
@@ -188,6 +189,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;
@@ -312,6 +318,7 @@ export class CadenzaClient {
                 source.page === 'welcome', 'labelSet is only supported on the welcome page');
         }
         const params = createParams({
+            dataType,
             disabledUiFeatures,
             expandNavigator,
             filter,
@@ -319,7 +326,6 @@ export class CadenzaClient {
             hideWorkbookToolBar,
             highlightGlobalId,
             labelSet,
-            dataType,
             operationMode,
         });
         return this.#show(resolvePath(source), params, signal);
@@ -353,6 +359,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
@@ -363,7 +370,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
@@ -371,16 +377,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,
@@ -536,14 +542,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
@@ -552,12 +559,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',
@@ -566,6 +573,7 @@ export class CadenzaClient {
             geometryType,
             minScale,
             operationMode,
+            snapping,
             useMapSrs,
             validExtentStrategy,
         });
@@ -585,14 +593,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
@@ -601,14 +610,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',
@@ -616,6 +625,7 @@ export class CadenzaClient {
             filter,
             minScale,
             operationMode,
+            snapping,
             useMapSrs,
             validExtentStrategy,
         });
@@ -650,6 +660,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)
@@ -658,7 +669,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
@@ -668,7 +678,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,
@@ -901,22 +911,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());
     }
     /**
@@ -927,20 +937,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(
@@ -1105,6 +1115,7 @@ function validOperationMode(/** @type string */ value) {
 }
 function validUiFeature(/** @type string */ value) {
     return [
+        'geometry-edit-translate',
         'workbook-design',
         'workbook-map-add-layer',
         'workbook-view-management',
@@ -1133,11 +1144,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}`));
     }
@@ -1181,15 +1193,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' }),
     });
@@ -1257,9 +1268,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}
  */
 /**
@@ -1271,9 +1282,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.3.0",
+  "version": "10.3.2",
   "license": "Apache-2.0",
   "repository": "github:DisyInformationssysteme/cadenza.js",
   "type": "module",

package/sandbox.html

@@ -165,8 +165,8 @@
       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 => cadenzaClient.createGeometry(data.embeddingTargetId, data.geometryType, getOptions(data)),
-      editGeometry: ({ geometry, ...data }) => cadenzaClient.editGeometry(data.embeddingTargetId, JSON.parse(geometry), getOptions(data)),
+      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)
       };
     }
 
@@ -368,6 +374,7 @@
 
       Supported features:
       <ul>
+        <li>geometry-edit-translate</li>
         <li>workbook-design</li>
         <li>workbook-map-add-layer</li>
         <li>workbook-view-management</li>
@@ -481,7 +488,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 +516,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 +553,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>