@disy/cadenza.js 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@disy/cadenza.js",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "repository": "github:DisyInformationssysteme/cadenza.js",
   "type": "module",
@@ -30,18 +30,18 @@
     "sandbox": "node ./sandbox.cjs"
   },
   "devDependencies": {
-    "@types/jest": "29.5.8",
+    "@types/jest": "29.5.11",
     "cross-env": "7.0.3",
-    "gh-pages": "6.0.0",
+    "gh-pages": "6.1.1",
     "http-server": "14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "keep-a-changelog": "2.5.2",
+    "keep-a-changelog": "2.5.3",
     "npm-run-all": "4.1.5",
     "onchange": "7.1.0",
-    "prettier": "3.1.0",
+    "prettier": "3.2.2",
     "ts-jest": "29.1.1",
-    "typedoc": "0.25.3"
+    "typedoc": "0.25.7"
   },
   "volta": {
     "node": "16.13.1"

package/sandbox.html

@@ -7,6 +7,11 @@
   <title>Cadenza JS Development Sandbox</title>
 
   <style>
+    :root {
+      --bg: #eee;
+      --gap: 12px;
+      --padding: 16px;
+    }
     * {
       box-sizing: border-box;
     }
@@ -14,21 +19,26 @@
       height: 100%;
     }
     body {
-      display: flex;
+      display: grid;
+      grid-template-areas:
+        'aside  main'
+        'footer footer';
+      grid-template-columns: 368px 1fr;
+      grid-template-rows: 1fr auto;
       margin: 0;
     }
-    aside, main {
-      padding: 16px;
-    }
     aside {
-      background: #eee;
+      background: var(--bg);
+      grid-area: aside;
       overflow: hidden auto;
-      width: 368px;
+    }
+    form {
+      padding-inline: var(--padding);
     }
     form, fieldset {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: var(--gap);
     }
     fieldset > div {
       display: flex;
@@ -40,12 +50,28 @@
       flex-direction: column;
       gap: 4px;
 
-      & > * {
+      > * {
         margin-block: 0;
       }
     }
+    .action-container {
+      align-items: end;
+      background: var(--bg);
+      border-bottom: 2px solid gray;
+      display: flex;
+      gap: 4px;
+      padding-bottom: var(--gap);
+      padding-top: var(--padding);
+      position: sticky;
+      top: 0;
+
+      > :first-child {
+        flex: 1;
+      }
+    }
     main {
-      flex: 1;
+      grid-area: main;
+      padding: var(--padding);
     }
     iframe {
       border: 4px solid #eee;
@@ -55,10 +81,25 @@
     label {
       font-weight: 600;
     }
+    hr:first-child {
+        display: none;
+    }
     select, input:is(:not([type]), [type=text], [type=number]), textarea, hr {
       display: block;
       width: 100%
     }
+    footer {
+      background: var(--bg);
+      display: flex;
+      font-size: small;
+      grid-area: footer;
+      justify-content: space-between;
+      padding: 4px var(--padding);
+
+      > * {
+        margin: 0;
+      }
+    }
   </style>
 
   <script type="module">
@@ -96,10 +137,25 @@
     const actionHandlers = {
       show: data => cadenzaClient.show(data.embeddingTargetId, getOptions(data)),
       showPage: data => cadenzaClient.show({ page: data.page }, getOptions(data)),
-      expandNavigator: data => cadenzaClient.expandNavigator(data.expandNavigator === 'on'),
       showMap: data => cadenzaClient.showMap(data.embeddingTargetId, getOptions(data)),
+      expandNavigator: data => cadenzaClient.expandNavigator(data.expandNavigator === 'on'),
+      getData: async data => {
+        const dataType = data.dataType;
+        const result = await cadenzaClient.getData(dataType);
+        if (dataType === 'png') {
+          const url = URL.createObjectURL(result);
+          iframe.src = url;
+          URL.revokeObjectURL(url);
+        }
+      },
+      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.values)),
+      addSelection: data => cadenzaClient.addSelection(JSON.parse(data.layer), JSON.parse(data.values)),
+      removeSelection: data => cadenzaClient.removeSelection(JSON.parse(data.layer), JSON.parse(data.values)),
       createGeometry: data => cadenzaClient.createGeometry(data.embeddingTargetId, data.geometryType, getOptions(data)),
-      editGeometry: data => cadenzaClient.editGeometry(data.embeddingTargetId, JSON.parse(data.geometry), getOptions(data)),
+      editGeometry: ({ geometry, ...data }) => cadenzaClient.editGeometry(data.embeddingTargetId, JSON.parse(geometry), getOptions(data)),
+      selectObjects: data => cadenzaClient.selectObjects(data.embeddingTargetId, getOptions(data)),
       fetchData: data => {
         console.log('Inspect the fetchData() request in the devtools.');
         cadenzaClient.fetchData(data.embeddingTargetId, data.dataType, getOptions(data));
@@ -146,6 +202,7 @@
       mapExtent,
       minScale,
       parts,
+      layers,
       simplifiedOperationMode,
       useMapSrs
     }) {
@@ -161,10 +218,11 @@
         ...(jasperReportAsPdf === 'on' && { dataType: 'pdf' }),
         labelSet,
         locationFinder,
-        mapExtent: mapExtent && mapExtent.split(','),
-        minScale,
+        mapExtent: mapExtent && mapExtent.split(',').map(Number),
+        minScale: minScale && Number(minScale),
         parts: parts && parts.split(','),
         ...(simplifiedOperationMode === 'on' && { operationMode: 'simplified' }),
+        layers: layers ? JSON.parse(layers) : undefined,
         useMapSrs: useMapSrs === 'on'
       };
     }
@@ -174,7 +232,7 @@
         if (value === '{{currentDate}}') { // convenience for current date
           return new Date();
         }
-        if (value.match?.(/....-..-..T..:..:..\....Z/)) {
+        if (value?.match?.(/....-..-..T..:..:..\....Z/)) {
           return new Date(value);
         }
         return value;
@@ -186,24 +244,40 @@
 
 <aside>
   <form id="form">
-    <div>
-      <label for="action">Action</label>
-      <select name="action" id="action">
-        <option value="show">Show</option>
-        <option value="showPage">Show Page</option>
-        <option value="expandNavigator">Expand Navigator</option>
-        <option value="showMap">Show Map</option>
-        <option value="createGeometry">Create Geometry</option>
-        <option value="editGeometry">Edit Geometry</option>
-        <option value="downloadData">Download data</option>
-        <option value="fetchData">Fetch data</option>
-      </select>
-    </div>
+    <div class="action-container">
+      <div>
+        <label for="action">Action</label>
+        <select name="action" id="action">
+          <optgroup label="Show">
+            <option value="show">Show</option>
+            <option value="showPage">Show Page</option>
+            <option value="showMap">Show Map</option>
+          </optgroup>
+          <optgroup label="Interact With Shown Content">
+            <option value="expandNavigator">Expand Navigator</option>
+            <!--option value="getData">Get Data (Get Map Image)</option-->
+            <!--option value="setFilter">Set Filter</option-->
+            <!--option value="setLayerVisibility">Set Layer Visibility</option-->
+            <!--option value="setSelection">Set Selection</option-->
+            <!--option value="addSelection">Add Selection</option-->
+            <!--option value="removeSelection">Remove Selection</option-->
+          </optgroup>
+          <optgroup label="Map Dialogs">
+            <option value="createGeometry">Create Geometry</option>
+            <option value="editGeometry">Edit Geometry</option>
+            <option value="selectObjects">Select Objects</option>
+          </optgroup>
+          <optgroup label="Without Iframe">
+            <option value="downloadData">Download data</option>
+            <option value="fetchData">Fetch data</option>
+          </optgroup>
+        </select>
+      </div>
 
-    <fieldset id="settings">
-    </fieldset>
+      <button>Go!</button>
+    </div>
 
-    <button>Go!</button>
+    <fieldset id="settings"></fieldset>
   </form>
 </aside>
 
@@ -211,6 +285,11 @@
   <iframe id="iframe"></iframe>
 </main>
 
+<footer>
+  <a href="https://disyinformationssysteme.github.io/cadenza.js/" target="_blank" rel="noreferrer">Cadenza JS Documentation</a>
+  <p>Open the browser's devtools (<kbd>F12</kbd>) to see requests and events.</p>
+</footer>
+
 <template id="common-show">
   <div>
     <label>
@@ -261,6 +340,7 @@
       <p>A JSON object with filter variable names and values</p>
       <p>Dates need to be ISO strings<br>(e.g. <code>"2023-11-17T17:12:06.175Z"</code>).<br>Use <code>"{{currentDate}}"</code> for the current date.</p>
       <p>Pass multiple values for an <code>IN</code> expression as <code>["a", "b", ...]</code></p>
+      <p>Pass <code>null</code> to unset a variable.</p>
     </small>
   </div>
 </template>
@@ -289,12 +369,19 @@
       <option>csv</option>
       <option>excel</option>
       <option>json</option>
-      <option>pdf</option>
     </select>
   </div>
   <div>
     <label for="parts">Parts</label>
     <input name="parts" id="parts" placeholder="columns,values,totals">
+    <small>
+      A comma-separated list of parts. Supported parts are:
+      <ul>
+        <li>columns</li>
+        <li>values</li>
+        <li>totals</li>
+      </ul>
+    </small>
   </div>
 </template>
 
@@ -345,6 +432,19 @@
   </div>
 </template>
 
+<template data-action="setFilter">
+  <div>
+    <label for="filter">Filter *</label>
+    <textarea name="filter" id="filter" rows="3" required></textarea>
+    <small>
+      <p>A JSON object with filter variable names and values</p>
+      <p>Dates need to be ISO strings<br>(e.g. <code>"2023-11-17T17:12:06.175Z"</code>).<br>Use <code>"{{currentDate}}"</code> for the current date.</p>
+      <p>Pass multiple values for an <code>IN</code> expression as <code>["a", "b", ...]</code></p>
+      <p>Pass <code>null</code> to unset a variable.</p>
+    </small>
+  </div>
+</template>
+
 <template data-action="createGeometry" data-common="map">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
@@ -382,6 +482,59 @@
   </div>
 </template>
 
+<template data-action="selectObjects" data-common="map">
+  <div>
+    <label for="embeddingTargetId">Embedding target ID of the map view *</label>
+    <input name="embeddingTargetId" id="embeddingTargetId" required>
+  </div>
+  <div>
+    <label for="layers">Layers</label>
+    <input name="layers" id="layers">
+    <small>
+      <p>
+        A JSON value like <code>["{layerPrintName}",...]</code> or
+        <code>[["{layerGroupPrintName}","{layerPrintName}"],...]</code>
+      </p>
+    </small>
+  </div>
+</template>
+
+<template data-action="setLayerVisibility" data-common="layer">
+  <div>
+    <label>
+      <input type="checkbox" name="visibility">
+      Visible
+    </label>
+  </div>
+</template>
+
+<template data-action="setSelection" data-common="layer,layer-selection"></template>
+<template data-action="addSelection" data-common="layer,layer-selection"></template>
+<template data-action="removeSelection" data-common="layer,layer-selection"></template>
+
+<template id="common-layer-selection">
+  <div>
+    <label for="values">List of Object IDs *</label>
+    <textarea name="values" id="values" rows="5" required></textarea>
+    <small>
+      <p>A JSON value like <code>["object1","object2"]</code></p>
+    </small>
+  </div>
+</template>
+
+<template id="common-layer">
+  <div>
+    <label for="layer">Layer *</label>
+    <input name="layer" id="layer" required>
+    <small>
+      <p>
+        A JSON value like <code>"{layerPrintName}"</code> or
+        <code>["{layerGroupPrintName}","{layerPrintName}"]</code>
+      </p>
+    </small>
+  </div>
+</template>
+
 <template data-action="downloadData" data-common="data">
   <div>
     <label for="embeddingTargetId">Embedding target ID *</label>
@@ -400,5 +553,18 @@
   </div>
 </template>
 
+<template data-action="getData">
+  <div>
+    <label for="dataType">Data type</label>
+    <select name="dataType" id="dataType" disabled>
+      <option>png</option>
+    </select>
+    <input type="hidden" name="dataType" value="png">
+    <small>
+      <p>Currently, only <code>dataType=png</code> is supported to get the image of the currently shown workbook map view.</p>
+    </small>
+  </div>
+</template>
+
 </body>
 </html>