@disy/cadenza.js 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +54 -5
- package/apidoc/assets/highlight.css +22 -22
- package/apidoc/assets/search.js +1 -1
- package/apidoc/classes/AbortError.html +7 -2
- package/apidoc/classes/CadenzaClient.html +258 -63
- package/apidoc/classes/CadenzaError.html +9 -4
- package/apidoc/functions/cadenza.html +13 -3
- package/apidoc/index.html +43 -18
- package/apidoc/interfaces/CadenzaEvent.html +8 -3
- package/apidoc/interfaces/ExternalLinkKey.html +103 -0
- package/apidoc/interfaces/Geometry.html +7 -2
- package/apidoc/interfaces/WorkbookKey.html +8 -3
- package/apidoc/interfaces/WorkbookViewKey.html +9 -4
- package/apidoc/interfaces/WorksheetKey.html +9 -4
- package/apidoc/modules.html +10 -0
- package/apidoc/types/CadenzaErrorEvent.html +6 -1
- package/apidoc/types/EmbeddingTargetId.html +6 -1
- package/apidoc/types/Extent.html +6 -1
- package/apidoc/types/GeometryType.html +6 -1
- package/apidoc/types/GlobalId.html +65 -0
- package/apidoc/types/MediaType.html +66 -0
- package/apidoc/types/OperationMode.html +65 -0
- package/apidoc/types/UiFeature.html +70 -0
- package/apidoc/types/WorkbookSource.html +6 -1
- package/apidoc/types/WorkbookViewSource.html +6 -1
- package/apidoc/types/WorksheetSource.html +6 -1
- package/cadenza.d.ts +130 -20
- package/cadenza.js +264 -93
- package/package.json +12 -5
- package/sandbox.html +342 -0
package/sandbox.html
ADDED
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
|
|
7
|
+
<title>Cadenza JS Development Sandbox</title>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
* {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
html, body {
|
|
14
|
+
height: 100%;
|
|
15
|
+
}
|
|
16
|
+
body {
|
|
17
|
+
display: flex;
|
|
18
|
+
margin: 0;
|
|
19
|
+
}
|
|
20
|
+
aside, main {
|
|
21
|
+
padding: 16px;
|
|
22
|
+
}
|
|
23
|
+
aside {
|
|
24
|
+
background: #eee;
|
|
25
|
+
overflow: hidden auto;
|
|
26
|
+
width: 368px;
|
|
27
|
+
}
|
|
28
|
+
form, fieldset {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
gap: 16px;
|
|
32
|
+
}
|
|
33
|
+
main {
|
|
34
|
+
flex: 1;
|
|
35
|
+
}
|
|
36
|
+
iframe {
|
|
37
|
+
border: 4px solid #eee;
|
|
38
|
+
height: 100%;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
label {
|
|
42
|
+
font-weight: 600;
|
|
43
|
+
}
|
|
44
|
+
select, input:is(:not([type], [type=text])), textarea {
|
|
45
|
+
display: block;
|
|
46
|
+
width: 100%
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
|
|
50
|
+
<script type="module">
|
|
51
|
+
import { cadenza } from './cadenza.js';
|
|
52
|
+
|
|
53
|
+
const actionSelect = document.getElementById('action');
|
|
54
|
+
const settingsContainer = document.getElementById('settings');
|
|
55
|
+
actionSelect.onchange = () => {
|
|
56
|
+
settingsContainer.innerHTML = '';
|
|
57
|
+
const action = actionSelect.value;
|
|
58
|
+
const settingsTemplate = document.querySelector(`[data-action=${action}]`);
|
|
59
|
+
settingsContainer.append(settingsTemplate.content.cloneNode(true));
|
|
60
|
+
|
|
61
|
+
const data = localStorage.getItem(`cadenzajs-sandbox-${action}`);
|
|
62
|
+
if (data) {
|
|
63
|
+
applyData(JSON.parse(data));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const url = new URL(location.href);
|
|
67
|
+
url.searchParams.set('action', action);
|
|
68
|
+
history.replaceState(null, '', url);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
const contextPath = new URLSearchParams(location.search).get('contextPath') ?? '';
|
|
72
|
+
const cadenzaClient = cadenza(location.origin + contextPath, { iframe: 'iframe', debug: true });
|
|
73
|
+
const actionHandlers = {
|
|
74
|
+
show ({ embeddingTargetId, hideMainHeaderAndFooter, hideWorkbookToolBar, jasperReportAsPdf, highlightGlobalId, operationMode, disabledUiFeatures }) {
|
|
75
|
+
cadenzaClient.show(embeddingTargetId, {
|
|
76
|
+
hideMainHeaderAndFooter: (hideMainHeaderAndFooter === 'on'),
|
|
77
|
+
hideWorkbookToolBar: (hideWorkbookToolBar === 'on'),
|
|
78
|
+
highlightGlobalId,
|
|
79
|
+
...(jasperReportAsPdf === 'on' && { mediaType: 'application/pdf' }),
|
|
80
|
+
...(operationMode === 'on' && { operationMode: 'normal' }),
|
|
81
|
+
disabledUiFeatures: disabledUiFeatures && disabledUiFeatures.split(',')
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
showMap ({ embeddingTargetId, useMapSrs, geometry, mapExtent, locationFinder, highlightGlobalId }) {
|
|
85
|
+
cadenzaClient.showMap(embeddingTargetId, {
|
|
86
|
+
useMapSrs: useMapSrs === 'on',
|
|
87
|
+
geometry: geometry && JSON.parse(geometry),
|
|
88
|
+
mapExtent: mapExtent && mapExtent.split(','),
|
|
89
|
+
locationFinder,
|
|
90
|
+
highlightGlobalId
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
createGeometry ({ embeddingTargetId, geometryType, useMapSrs, minScale, mapExtent, locationFinder }) {
|
|
94
|
+
cadenzaClient.createGeometry(embeddingTargetId, geometryType, {
|
|
95
|
+
useMapSrs: useMapSrs === 'on',
|
|
96
|
+
minScale,
|
|
97
|
+
mapExtent: mapExtent && mapExtent.split(','),
|
|
98
|
+
locationFinder
|
|
99
|
+
});
|
|
100
|
+
},
|
|
101
|
+
editGeometry ({ embeddingTargetId, geometry, useMapSrs, minScale, mapExtent, locationFinder }) {
|
|
102
|
+
cadenzaClient.editGeometry(embeddingTargetId, JSON.parse(geometry), {
|
|
103
|
+
useMapSrs: useMapSrs === 'on',
|
|
104
|
+
minScale,
|
|
105
|
+
mapExtent: mapExtent && mapExtent.split(','),
|
|
106
|
+
locationFinder
|
|
107
|
+
});
|
|
108
|
+
},
|
|
109
|
+
fetchData ({ embeddingTargetId, mediaType }) {
|
|
110
|
+
console.log('Inspect the fetchData() request in the devtools.');
|
|
111
|
+
cadenzaClient.fetchData(embeddingTargetId, mediaType);
|
|
112
|
+
},
|
|
113
|
+
downloadData ({ embeddingTargetId, mediaType, fileName }) {
|
|
114
|
+
cadenzaClient.downloadData(embeddingTargetId, mediaType, {
|
|
115
|
+
fileName
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const form = document.getElementById('form');
|
|
121
|
+
form.onsubmit = (event) => {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
const { action, ...data } = Object.fromEntries(new FormData(form));
|
|
124
|
+
actionHandlers[action](data);
|
|
125
|
+
localStorage.setItem(`cadenzajs-sandbox-${action}`, JSON.stringify(data));
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
actionSelect.value = new URLSearchParams(location.search).get('action') || 'show';
|
|
129
|
+
actionSelect.onchange();
|
|
130
|
+
|
|
131
|
+
function applyData (data) {
|
|
132
|
+
for (const [ name, value ] of Object.entries(data)) {
|
|
133
|
+
const control = form.elements[name];
|
|
134
|
+
if (control) {
|
|
135
|
+
if (control.type === 'checkbox') {
|
|
136
|
+
control.checked = (value === 'on');
|
|
137
|
+
} else {
|
|
138
|
+
control.value = value;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</script>
|
|
144
|
+
</head>
|
|
145
|
+
<body>
|
|
146
|
+
|
|
147
|
+
<aside>
|
|
148
|
+
<form id="form">
|
|
149
|
+
<div>
|
|
150
|
+
<label for="action">Action</label>
|
|
151
|
+
<select name="action" id="action">
|
|
152
|
+
<option value="show">Show</option>
|
|
153
|
+
<option value="showMap">Show Map</option>
|
|
154
|
+
<option value="createGeometry">Create Geometry</option>
|
|
155
|
+
<option value="editGeometry">Edit Geometry</option>
|
|
156
|
+
<option value="downloadData">Download data</option>
|
|
157
|
+
<option value="fetchData">Fetch data</option>
|
|
158
|
+
</select>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<fieldset id="settings">
|
|
162
|
+
</fieldset>
|
|
163
|
+
|
|
164
|
+
<button>Go!</button>
|
|
165
|
+
</form>
|
|
166
|
+
</aside>
|
|
167
|
+
|
|
168
|
+
<main>
|
|
169
|
+
<iframe id="iframe"></iframe>
|
|
170
|
+
</main>
|
|
171
|
+
|
|
172
|
+
<template data-action="show">
|
|
173
|
+
<div>
|
|
174
|
+
<label for="embeddingTargetId">Embedding target ID *</label>
|
|
175
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
176
|
+
</div>
|
|
177
|
+
<div>
|
|
178
|
+
<label>
|
|
179
|
+
<input type="checkbox" name="jasperReportAsPdf" id="jasperReportAsPdf"/>
|
|
180
|
+
Show Jasper Report as PDF
|
|
181
|
+
</label>
|
|
182
|
+
</div>
|
|
183
|
+
<div>
|
|
184
|
+
<label>
|
|
185
|
+
<input type="checkbox" name="hideMainHeaderAndFooter">
|
|
186
|
+
Hide main header and footer
|
|
187
|
+
</label>
|
|
188
|
+
</div>
|
|
189
|
+
<div>
|
|
190
|
+
<label>
|
|
191
|
+
<input type="checkbox" name="hideWorkbookToolBar">
|
|
192
|
+
Hide workbook toolbar
|
|
193
|
+
</label>
|
|
194
|
+
</div>
|
|
195
|
+
<div>
|
|
196
|
+
<label>
|
|
197
|
+
<input type="checkbox" name="operationMode">
|
|
198
|
+
Enable simplified operation mode
|
|
199
|
+
</label>
|
|
200
|
+
</div>
|
|
201
|
+
<div>
|
|
202
|
+
<label for="highlightGlobalId">Highlighted Global ID</label>
|
|
203
|
+
<input name="highlightGlobalId" id="highlightGlobalId">
|
|
204
|
+
</div>
|
|
205
|
+
<div>
|
|
206
|
+
<label for="disabledUiFeatures">Disabled UI features</label>
|
|
207
|
+
<input name="disabledUiFeatures" id="disabledUiFeatures" placeholder="feature1,feature2...">
|
|
208
|
+
</div>
|
|
209
|
+
</template>
|
|
210
|
+
|
|
211
|
+
<template data-action="showMap">
|
|
212
|
+
<div>
|
|
213
|
+
<label for="embeddingTargetId">Embedding target ID of the map view *</label>
|
|
214
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
215
|
+
</div>
|
|
216
|
+
<div>
|
|
217
|
+
<label>
|
|
218
|
+
<input type="checkbox" name="useMapSrs">
|
|
219
|
+
Use map SRS
|
|
220
|
+
</label>
|
|
221
|
+
</div>
|
|
222
|
+
<div>
|
|
223
|
+
<label for="geometry">Geometry (GeoJSON)</label>
|
|
224
|
+
<textarea name="geometry" id="geometry" rows="5"></textarea>
|
|
225
|
+
</div>
|
|
226
|
+
<div>
|
|
227
|
+
<label for="useMapSrs">Use map SRS</label>
|
|
228
|
+
<input type="checkbox" name="useMapSrs" id="useMapSrs" />
|
|
229
|
+
</div>
|
|
230
|
+
<div>
|
|
231
|
+
<label for="mapExtent">Map extent coordinates</label>
|
|
232
|
+
<input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
|
|
233
|
+
</div>
|
|
234
|
+
<div>
|
|
235
|
+
<label for="locationFinder">Location finder search query</label>
|
|
236
|
+
<input name="locationFinder" id="locationFinder">
|
|
237
|
+
</div>
|
|
238
|
+
<div>
|
|
239
|
+
<label for="highlightGlobalId">Highlighted Global ID</label>
|
|
240
|
+
<input name="highlightGlobalId" id="highlightGlobalId">
|
|
241
|
+
</div>
|
|
242
|
+
</template>
|
|
243
|
+
|
|
244
|
+
<template data-action="createGeometry">
|
|
245
|
+
<div>
|
|
246
|
+
<label for="embeddingTargetId">Embedding target ID of the map view *</label>
|
|
247
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
248
|
+
</div>
|
|
249
|
+
<div>
|
|
250
|
+
<label for="geometryType">Geometry type</label>
|
|
251
|
+
<select name="geometryType" id="geometryType">
|
|
252
|
+
<option>Point</option>
|
|
253
|
+
<option>MultiPoint</option>
|
|
254
|
+
<option>LineString</option>
|
|
255
|
+
<option>MultiLineString</option>
|
|
256
|
+
<option>Polygon</option>
|
|
257
|
+
<option>MultiPolygon</option>
|
|
258
|
+
</select>
|
|
259
|
+
</div>
|
|
260
|
+
<div>
|
|
261
|
+
<label for="minScale">Minimum Scale</label>
|
|
262
|
+
<input type="number" name="minScale" id="minScale">
|
|
263
|
+
</div>
|
|
264
|
+
<div>
|
|
265
|
+
<label for="useMapSrs">Use map SRS</label>
|
|
266
|
+
<input type="checkbox" name="useMapSrs" id="useMapSrs" />
|
|
267
|
+
</div>
|
|
268
|
+
<div>
|
|
269
|
+
<label for="mapExtent">Map extent coordinates</label>
|
|
270
|
+
<input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
|
|
271
|
+
</div>
|
|
272
|
+
<div>
|
|
273
|
+
<label for="locationFinder">Location finder search query</label>
|
|
274
|
+
<input name="locationFinder" id="locationFinder">
|
|
275
|
+
</div>
|
|
276
|
+
</template>
|
|
277
|
+
|
|
278
|
+
<template data-action="editGeometry">
|
|
279
|
+
<div>
|
|
280
|
+
<label for="embeddingTargetId">Embedding target ID of the map view *</label>
|
|
281
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
282
|
+
</div>
|
|
283
|
+
<div>
|
|
284
|
+
<label for="geometry">Geometry (GeoJSON) *</label>
|
|
285
|
+
<textarea name="geometry" id="geometry" rows="5" required></textarea>
|
|
286
|
+
</div>
|
|
287
|
+
<div>
|
|
288
|
+
<label for="minScale">Minimum Scale</label>
|
|
289
|
+
<input type="number" name="minScale" id="minScale">
|
|
290
|
+
</div>
|
|
291
|
+
<div>
|
|
292
|
+
<label for="useMapSrs">Use map SRS</label>
|
|
293
|
+
<input type="checkbox" name="useMapSrs" id="useMapSrs" />
|
|
294
|
+
</div>
|
|
295
|
+
<div>
|
|
296
|
+
<label for="mapExtent">Map extent coordinates</label>
|
|
297
|
+
<input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
|
|
298
|
+
</div>
|
|
299
|
+
<div>
|
|
300
|
+
<label for="locationFinder">Location finder search query</label>
|
|
301
|
+
<input name="locationFinder" id="locationFinder">
|
|
302
|
+
</div>
|
|
303
|
+
</template>
|
|
304
|
+
|
|
305
|
+
<template data-action="downloadData">
|
|
306
|
+
<div>
|
|
307
|
+
<label for="embeddingTargetId">Embedding target ID *</label>
|
|
308
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
309
|
+
</div>
|
|
310
|
+
<div>
|
|
311
|
+
<label for="mediaType">Media type *</label>
|
|
312
|
+
<select name="mediaType" id="mediaType" required>
|
|
313
|
+
<option>text/csv</option>
|
|
314
|
+
<option>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</option>
|
|
315
|
+
<option>application/json</option>
|
|
316
|
+
<option>application/pdf</option>
|
|
317
|
+
</select>
|
|
318
|
+
</div>
|
|
319
|
+
<div>
|
|
320
|
+
<label for="fileName">Filename</label>
|
|
321
|
+
<input name="fileName" id="fileName">
|
|
322
|
+
</div>
|
|
323
|
+
</template>
|
|
324
|
+
|
|
325
|
+
<template data-action="fetchData">
|
|
326
|
+
<div>
|
|
327
|
+
<label for="embeddingTargetId">Embedding target ID *</label>
|
|
328
|
+
<input name="embeddingTargetId" id="embeddingTargetId" required>
|
|
329
|
+
</div>
|
|
330
|
+
<div>
|
|
331
|
+
<label for="mediaType">Media type *</label>
|
|
332
|
+
<select name="mediaType" id="mediaType" required>
|
|
333
|
+
<option>text/csv</option>
|
|
334
|
+
<option>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</option>
|
|
335
|
+
<option>application/json</option>
|
|
336
|
+
<option>application/pdf</option>
|
|
337
|
+
</select>
|
|
338
|
+
</div>
|
|
339
|
+
</template>
|
|
340
|
+
|
|
341
|
+
</body>
|
|
342
|
+
</html>
|