@vcmap/ui 5.1.7 → 5.2.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.
Files changed (91) hide show
  1. package/build/buildTypes.js +9 -0
  2. package/config/base.config.json +33 -2
  3. package/config/dev.config.json +22 -2
  4. package/dist/assets/cesium.js +1 -1
  5. package/dist/assets/{core.42b085.js → core.627882.js} +4097 -3978
  6. package/dist/assets/core.js +1 -1
  7. package/dist/assets/index-76acacac.js +1 -0
  8. package/dist/assets/ol.js +1 -1
  9. package/dist/assets/{ui.d91b1c.css → ui.895896.css} +2 -2
  10. package/dist/assets/{ui.d91b1c.js → ui.895896.js} +8629 -7658
  11. package/dist/assets/ui.js +1 -1
  12. package/dist/assets/vue.js +2 -2
  13. package/dist/assets/{vuetify.be3c1c.js → vuetify.1621f3.js} +1 -1
  14. package/dist/assets/vuetify.js +2 -2
  15. package/dist/index.html +1 -1
  16. package/index.d.ts +16 -0
  17. package/index.js +23 -0
  18. package/package.json +2 -2
  19. package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue +110 -37
  20. package/plugins/@vcmap-show-case/collection-manager-example/src/index.js +4 -0
  21. package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +10 -3
  22. package/plugins/@vcmap-show-case/panel-tester/README.md +3 -0
  23. package/plugins/@vcmap-show-case/panel-tester/package.json +5 -0
  24. package/plugins/@vcmap-show-case/panel-tester/src/IframePanelExample.vue +15 -0
  25. package/plugins/@vcmap-show-case/panel-tester/src/ImgPanelExample.vue +19 -0
  26. package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue +128 -0
  27. package/plugins/@vcmap-show-case/panel-tester/src/TextPanelExample.vue +34 -0
  28. package/plugins/@vcmap-show-case/panel-tester/src/index.js +63 -0
  29. package/src/actions/actionHelper.js +2 -2
  30. package/src/actions/flightActions.d.ts +38 -2
  31. package/src/actions/flightActions.js +257 -6
  32. package/src/application/VcsApp.vue +4 -104
  33. package/src/application/VcsApp.vue.d.ts +0 -6
  34. package/src/application/VcsContainer.vue +105 -0
  35. package/src/application/VcsContainer.vue.d.ts +14 -0
  36. package/src/application/VcsMainMap.vue +68 -0
  37. package/src/application/VcsMainMap.vue.d.ts +9 -0
  38. package/src/application/markdownHelper.d.ts +7 -0
  39. package/src/application/markdownHelper.js +57 -1
  40. package/src/components/form-inputs-controls/VcsRadioGrid.vue +27 -42
  41. package/src/contentTree/LayerTree.vue +40 -14
  42. package/src/downloadHelper.d.ts +0 -2
  43. package/src/downloadHelper.js +2 -4
  44. package/src/featureInfo/BalloonComponent.vue +31 -3
  45. package/src/featureInfo/BalloonComponent.vue.d.ts +1 -0
  46. package/src/featureInfo/MarkdownBalloonComponent.vue +24 -0
  47. package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +12 -0
  48. package/src/featureInfo/abstractFeatureInfoView.js +54 -22
  49. package/src/featureInfo/addressBalloonFeatureInfoView.d.ts +2 -2
  50. package/src/featureInfo/addressBalloonFeatureInfoView.js +1 -1
  51. package/src/featureInfo/balloonFeatureInfoView.js +1 -1
  52. package/src/featureInfo/balloonHelper.js +16 -9
  53. package/src/featureInfo/featureInfo.js +10 -0
  54. package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +47 -0
  55. package/src/featureInfo/markdownBalloonFeatureInfoView.js +81 -0
  56. package/src/featureInfo/markdownFeatureInfoView.d.ts +47 -0
  57. package/src/featureInfo/markdownFeatureInfoView.js +95 -0
  58. package/src/i18n/de.d.ts +8 -3
  59. package/src/i18n/de.js +3 -0
  60. package/src/i18n/en.d.ts +32 -26
  61. package/src/i18n/en.js +4 -1
  62. package/src/manager/collectionManager/CollectionComponent.vue +12 -49
  63. package/src/manager/collectionManager/CollectionComponent.vue.d.ts +5 -9
  64. package/src/manager/collectionManager/CollectionComponentContent.vue +102 -0
  65. package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts +17 -0
  66. package/src/manager/collectionManager/CollectionComponentList.vue +10 -2
  67. package/src/manager/collectionManager/CollectionComponentList.vue.d.ts +9 -0
  68. package/src/manager/collectionManager/CollectionComponentStandalone.vue +91 -0
  69. package/src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts +9 -0
  70. package/src/manager/collectionManager/collectionManager.d.ts +2 -2
  71. package/src/manager/collectionManager/collectionManager.js +21 -19
  72. package/src/manager/panel/PanelComponent.vue +110 -0
  73. package/src/manager/panel/PanelComponent.vue.d.ts +19 -0
  74. package/src/manager/panel/PanelManagerComponent.vue +224 -0
  75. package/src/manager/panel/PanelManagerComponent.vue.d.ts +36 -0
  76. package/src/manager/panel/panelHelper.d.ts +83 -0
  77. package/src/manager/panel/panelHelper.js +272 -0
  78. package/src/manager/panel/panelManager.d.ts +338 -0
  79. package/src/manager/panel/panelManager.js +381 -0
  80. package/src/manager/window/WindowManager.vue +14 -0
  81. package/src/manager/window/windowHelper.js +1 -1
  82. package/src/search/ResultItem.vue +1 -1
  83. package/src/search/search.d.ts +2 -2
  84. package/src/search/search.js +2 -2
  85. package/src/vcsUiApp.d.ts +14 -0
  86. package/src/vcsUiApp.js +18 -0
  87. package/dist/assets/index-c055a222.js +0 -1
  88. /package/dist/assets/{cesium.0b68c5.js → cesium.9e39f4.js} +0 -0
  89. /package/dist/assets/{ol.9e8753.js → ol.fe8c0e.js} +0 -0
  90. /package/dist/assets/{vue.33980b.js → vue.4b3319.js} +0 -0
  91. /package/dist/assets/{vuetify.be3c1c.css → vuetify.1621f3.css} +0 -0
@@ -1,6 +1,7 @@
1
1
  import { VcsObject } from '@vcmap/core';
2
2
  import { WindowSlot } from '../manager/window/windowManager.js';
3
3
  import { defaultTagOptions } from '../components/tables/VcsTable.vue';
4
+ import { replaceAttributes } from '../application/markdownHelper.js';
4
5
 
5
6
  /**
6
7
  * @typedef {Object} FeatureInfoProps
@@ -29,7 +30,7 @@ import { defaultTagOptions } from '../components/tables/VcsTable.vue';
29
30
  * @property {Object<string,string>} [keyMapping] - object providing text replacements or i18n strings for attribute keys
30
31
  * @property {Object<string, string|Object<string,string>>} [valueMapping] - object providing text replacements or i18n strings for attribute values
31
32
  * @property {Object<string,HTMLTagOptions>} [tags] - object with keys rendered as special html element. Value contains html options
32
- * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined.
33
+ * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
33
34
  */
34
35
 
35
36
  /**
@@ -125,22 +126,24 @@ export function applyKeyMapping(attributes, mapping) {
125
126
  return 0;
126
127
  })
127
128
  .forEach((mappingKey) => {
128
- if (Object.hasOwn(attributes, mappingKey)) {
129
- attributes[mapping[mappingKey]] = attributes[mappingKey];
130
- delete attributes[mappingKey];
131
- } else {
132
- const mappingKeys = mappingKey.split('.');
133
- mappingKeys.reduce((obj, key, index) => {
134
- if (
135
- obj &&
136
- Object.hasOwn(obj, key) &&
137
- index === mappingKeys.length - 1
138
- ) {
139
- attributes[mapping[mappingKey]] = obj[key];
140
- delete obj[key];
141
- }
142
- return obj?.[key];
143
- }, attributes);
129
+ if (mappingKey !== mapping[mappingKey]) {
130
+ if (Object.hasOwn(attributes, mappingKey)) {
131
+ attributes[mapping[mappingKey]] = attributes[mappingKey];
132
+ delete attributes[mappingKey];
133
+ } else {
134
+ const mappingKeys = mappingKey.split('.');
135
+ mappingKeys.reduce((obj, key, index) => {
136
+ if (
137
+ obj &&
138
+ Object.hasOwn(obj, key) &&
139
+ index === mappingKeys.length - 1
140
+ ) {
141
+ attributes[mapping[mappingKey]] = obj[key];
142
+ delete obj[key];
143
+ }
144
+ return obj?.[key];
145
+ }, attributes);
146
+ }
144
147
  }
145
148
  });
146
149
  }
@@ -226,6 +229,7 @@ export function applyOlcsAttributeFilter(attributes, keys = []) {
226
229
  export function applyEmptyAttributesFilter(attributes) {
227
230
  return Object.keys(attributes).reduce((obj, key) => {
228
231
  if (
232
+ attributes[key] !== null &&
229
233
  typeof attributes[key] === 'object' &&
230
234
  Object.keys(attributes[key]).length === 0
231
235
  ) {
@@ -236,6 +240,32 @@ export function applyEmptyAttributesFilter(attributes) {
236
240
  }, {});
237
241
  }
238
242
 
243
+ /**
244
+ *
245
+ * @param {import("../vcsUiApp.js").default} app
246
+ * @param {import("../manager/window/windowManager.js").WindowState} state
247
+ * @param {Object} attributes
248
+ * @returns {import("../manager/window/windowManager.js").WindowState}
249
+ */
250
+ function getWindowState(app, state, attributes) {
251
+ let headerTitle = state?.headerTitle;
252
+ if (headerTitle) {
253
+ if (Array.isArray(headerTitle)) {
254
+ headerTitle = headerTitle.map((item) =>
255
+ replaceAttributes(item, attributes),
256
+ );
257
+ } else {
258
+ headerTitle = replaceAttributes(headerTitle, attributes);
259
+ }
260
+ }
261
+ return {
262
+ headerIcon: '$vcsInfo',
263
+ infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
264
+ ...state,
265
+ headerTitle: headerTitle || attributes.layerName,
266
+ };
267
+ }
268
+
239
269
  /**
240
270
  * Abstract class to be extended by FeatureInfoView classes
241
271
  * Subclasses must always provide a component and may overwrite class methods.
@@ -393,11 +423,10 @@ class AbstractFeatureInfoView extends VcsObject {
393
423
  */
394
424
  getWindowComponentOptions(app, featureInfo, layer) {
395
425
  return {
396
- state: this.window.state ?? {
397
- headerTitle: layer.properties?.title || layer.name,
398
- headerIcon: '$vcsInfo',
399
- infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
400
- },
426
+ state: getWindowState(app, this.window.state, {
427
+ ...this.getAttributes(featureInfo.feature),
428
+ layerName: layer.properties?.title || layer.name,
429
+ }),
401
430
  slot: this.window.slot ?? WindowSlot.DYNAMIC_RIGHT,
402
431
  component: this.component,
403
432
  position: this.window.position,
@@ -419,6 +448,9 @@ class AbstractFeatureInfoView extends VcsObject {
419
448
  if (this.valueMapping) {
420
449
  config.valueMapping = JSON.parse(JSON.stringify(this.valueMapping));
421
450
  }
451
+ if (this.tags) {
452
+ config.tags = JSON.parse(JSON.stringify(this.tags));
453
+ }
422
454
  if (Object.keys(this._window).length > 0) {
423
455
  config.window = { ...this._window };
424
456
  }
@@ -1,5 +1,5 @@
1
1
  export default AddressBalloonFeatureInfoView;
2
- export type AddressBalloonFeatureInfoViewOptions = import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & {
2
+ export type AddressBalloonFeatureInfoViewOptions = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
3
3
  addressName?: string | null;
4
4
  street?: string | null;
5
5
  number?: string | null;
@@ -8,7 +8,7 @@ export type AddressBalloonFeatureInfoViewOptions = import("./abstractFeatureInfo
8
8
  country?: string | null;
9
9
  };
10
10
  /**
11
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions &{
11
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
12
12
  * addressName?: string|null,
13
13
  * street?: string|null,
14
14
  * number?: string|null,
@@ -4,7 +4,7 @@ import BalloonFeatureInfoView, {
4
4
  import AddressBalloonComponent from './AddressBalloonComponent.vue';
5
5
 
6
6
  /**
7
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions &{
7
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
8
8
  * addressName?: string|null,
9
9
  * street?: string|null,
10
10
  * number?: string|null,
@@ -115,7 +115,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
115
115
  properties.attributes,
116
116
  this.balloonTitle,
117
117
  )
118
- : properties.layerProperties.title,
118
+ : properties.layerProperties.title || layer.name,
119
119
  balloonSubtitle:
120
120
  this.balloonSubtitle != null
121
121
  ? extractNestedKey(
@@ -78,17 +78,24 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
78
78
  if (!windowPosition) {
79
79
  return;
80
80
  }
81
- windowManager.setWindowPositionOptions(
82
- id,
83
- getWindowPositionOptionsFromMapEvent(
84
- new Cartesian2(
85
- windowPosition.x - balloonOffset.x,
86
- windowPosition.y - balloonOffset.y,
87
- ),
88
- target,
89
- WindowAlignment.BOTTOM_LEFT,
81
+
82
+ const { width, height, maxWidth, maxHeight } = windowManager.get(id).position;
83
+ const mapWindowPosition = getWindowPositionOptionsFromMapEvent(
84
+ new Cartesian2(
85
+ windowPosition.x - balloonOffset.x,
86
+ windowPosition.y - balloonOffset.y,
90
87
  ),
88
+ target,
89
+ WindowAlignment.BOTTOM_LEFT,
91
90
  );
91
+
92
+ windowManager.setWindowPositionOptions(id, {
93
+ width,
94
+ height,
95
+ maxWidth,
96
+ maxHeight,
97
+ ...mapWindowPosition,
98
+ });
92
99
  }
93
100
 
94
101
  /**
@@ -30,8 +30,10 @@ import TableFeatureInfoView from './tableFeatureInfoView.js';
30
30
  import IframeFeatureInfoView from './iframeFeatureInfoView.js';
31
31
  import AddressBalloonFeatureInfoView from './addressBalloonFeatureInfoView.js';
32
32
  import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
33
+ import MarkdownFeatureInfoView from './markdownFeatureInfoView.js';
33
34
  import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
34
35
  import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
36
+ import MarkdownBalloonFeatureInfoView from './markdownBalloonFeatureInfoView.js';
35
37
 
36
38
  /** @typedef {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
37
39
 
@@ -518,3 +520,11 @@ featureInfoClassRegistry.registerClass(
518
520
  AddressBalloonFeatureInfoView.className,
519
521
  AddressBalloonFeatureInfoView,
520
522
  );
523
+ featureInfoClassRegistry.registerClass(
524
+ MarkdownBalloonFeatureInfoView.className,
525
+ MarkdownBalloonFeatureInfoView,
526
+ );
527
+ featureInfoClassRegistry.registerClass(
528
+ MarkdownFeatureInfoView.className,
529
+ MarkdownFeatureInfoView,
530
+ );
@@ -0,0 +1,47 @@
1
+ export default MarkdownBalloonFeatureInfoView;
2
+ export type MarkdownBalloonFeatureInfoViewOptions = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
3
+ template: string | string[];
4
+ };
5
+ export type MarkdownBalloonFeatureInfoViewProps = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & {
6
+ html: string;
7
+ };
8
+ /**
9
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & { template: string | string[] }} MarkdownBalloonFeatureInfoViewOptions
10
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
11
+ */
12
+ /**
13
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & { html: string }} MarkdownBalloonFeatureInfoViewProps
14
+ */
15
+ /**
16
+ * @class
17
+ * @description A markdown Balloon Featureinfo
18
+ * @extends {BalloonFeatureInfoView}
19
+ */
20
+ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
21
+ /**
22
+ * @param {MarkdownBalloonFeatureInfoViewOptions} options
23
+ */
24
+ constructor(options: MarkdownBalloonFeatureInfoViewOptions);
25
+ /**
26
+ * @type {string | string[]}
27
+ */
28
+ template: string | string[];
29
+ /**
30
+ * @param {Record<string, unknown>} attributes
31
+ * @protected
32
+ * @returns {string}
33
+ */
34
+ protected _renderTemplate(attributes: Record<string, unknown>): string;
35
+ /**
36
+ * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
37
+ * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
38
+ * @param {import("@vcmap/core").Layer} layer
39
+ * @returns {MarkdownBalloonFeatureInfoViewProps}
40
+ */
41
+ getProperties(featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): MarkdownBalloonFeatureInfoViewProps;
42
+ /**
43
+ * @returns {MarkdownBalloonFeatureInfoViewOptions}
44
+ */
45
+ toJSON(): MarkdownBalloonFeatureInfoViewOptions;
46
+ }
47
+ import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
@@ -0,0 +1,81 @@
1
+ import {
2
+ parseAndSanitizeMarkdown,
3
+ replaceAttributes,
4
+ } from '../application/markdownHelper.js';
5
+ import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
6
+ import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
7
+
8
+ /**
9
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & { template: string | string[] }} MarkdownBalloonFeatureInfoViewOptions
10
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
11
+ */
12
+
13
+ /**
14
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & { html: string }} MarkdownBalloonFeatureInfoViewProps
15
+ */
16
+
17
+ /**
18
+ * @class
19
+ * @description A markdown Balloon Featureinfo
20
+ * @extends {BalloonFeatureInfoView}
21
+ */
22
+ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
23
+ /**
24
+ * @type {string}
25
+ */
26
+ static get className() {
27
+ return 'MarkdownBalloonFeatureInfoView';
28
+ }
29
+
30
+ /**
31
+ * @param {MarkdownBalloonFeatureInfoViewOptions} options
32
+ */
33
+ constructor(options) {
34
+ super(options, MarkdownBalloonComponent);
35
+
36
+ /**
37
+ * @type {string | string[]}
38
+ */
39
+ this.template = Array.isArray(options.template)
40
+ ? options.template.slice()
41
+ : options.template;
42
+ }
43
+
44
+ /**
45
+ * @param {Record<string, unknown>} attributes
46
+ * @protected
47
+ * @returns {string}
48
+ */
49
+ _renderTemplate(attributes) {
50
+ return replaceAttributes(this.template, attributes);
51
+ }
52
+
53
+ /**
54
+ * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
55
+ * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
56
+ * @param {import("@vcmap/core").Layer} layer
57
+ * @returns {MarkdownBalloonFeatureInfoViewProps}
58
+ */
59
+ getProperties(featureInfo, layer) {
60
+ const properties = super.getProperties(featureInfo, layer);
61
+ return {
62
+ ...properties,
63
+ html: parseAndSanitizeMarkdown(
64
+ this._renderTemplate({ ...properties, ...properties.attributes }),
65
+ ),
66
+ };
67
+ }
68
+
69
+ /**
70
+ * @returns {MarkdownBalloonFeatureInfoViewOptions}
71
+ */
72
+ toJSON() {
73
+ const config = super.toJSON();
74
+ config.template = Array.isArray(this.template)
75
+ ? this.template.slice()
76
+ : this.template;
77
+ return config;
78
+ }
79
+ }
80
+
81
+ export default MarkdownBalloonFeatureInfoView;
@@ -0,0 +1,47 @@
1
+ export default MarkdownFeatureInfoView;
2
+ export type MarkdownFeatureInfoViewOptions = import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & {
3
+ template: string | string[];
4
+ };
5
+ export type MarkdownFeatureInfoViewProps = import("./abstractFeatureInfoView.js").FeatureInfoProps & {
6
+ html: string;
7
+ };
8
+ /**
9
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
10
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
11
+ */
12
+ /**
13
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
14
+ */
15
+ /**
16
+ * @class
17
+ * @description A simple markdown feature info view. will render feature attributes into the markdown and replace {{}}
18
+ * @extends {AbstractFeatureInfoView}
19
+ */
20
+ declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
21
+ /**
22
+ * @param {MarkdownFeatureInfoViewOptions} options
23
+ */
24
+ constructor(options: MarkdownFeatureInfoViewOptions);
25
+ /**
26
+ * @type {string | string[]}
27
+ */
28
+ template: string | string[];
29
+ /**
30
+ * @param {Record<string, unknown>} attributes
31
+ * @protected
32
+ * @returns {string}
33
+ */
34
+ protected _renderTemplate(attributes: Record<string, unknown>): string;
35
+ /**
36
+ * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
37
+ * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
38
+ * @param {import("@vcmap/core").Layer} layer
39
+ * @returns {MarkdownFeatureInfoViewProps}
40
+ */
41
+ getProperties(featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): MarkdownFeatureInfoViewProps;
42
+ /**
43
+ * @returns {MarkdownFeatureInfoViewOptions}
44
+ */
45
+ toJSON(): MarkdownFeatureInfoViewOptions;
46
+ }
47
+ import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -0,0 +1,95 @@
1
+ import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
2
+ import {
3
+ parseAndSanitizeMarkdown,
4
+ replaceAttributes,
5
+ } from '../application/markdownHelper.js';
6
+
7
+ /**
8
+ * @description A component to render markdown html
9
+ * @vue-prop {string} html - the html to render
10
+ */
11
+ const MarkdownComponent = {
12
+ name: 'MarkdownComponent',
13
+ props: {
14
+ html: {
15
+ type: String,
16
+ required: true,
17
+ },
18
+ },
19
+ template: '<div class="pa-2" v-html="html" />',
20
+ };
21
+
22
+ /**
23
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
24
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
25
+ */
26
+
27
+ /**
28
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
29
+ */
30
+
31
+ /**
32
+ * @class
33
+ * @description A simple markdown feature info view. will render feature attributes into the markdown and replace {{}}
34
+ * @extends {AbstractFeatureInfoView}
35
+ */
36
+ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
37
+ /**
38
+ * @type {string}
39
+ */
40
+ static get className() {
41
+ return 'MarkdownFeatureInfoView';
42
+ }
43
+
44
+ /**
45
+ * @param {MarkdownFeatureInfoViewOptions} options
46
+ */
47
+ constructor(options) {
48
+ super(options, MarkdownComponent);
49
+
50
+ /**
51
+ * @type {string | string[]}
52
+ */
53
+ this.template = Array.isArray(options.template)
54
+ ? options.template.slice()
55
+ : options.template;
56
+ }
57
+
58
+ /**
59
+ * @param {Record<string, unknown>} attributes
60
+ * @protected
61
+ * @returns {string}
62
+ */
63
+ _renderTemplate(attributes) {
64
+ return replaceAttributes(this.template, attributes);
65
+ }
66
+
67
+ /**
68
+ * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
69
+ * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
70
+ * @param {import("@vcmap/core").Layer} layer
71
+ * @returns {MarkdownFeatureInfoViewProps}
72
+ */
73
+ getProperties(featureInfo, layer) {
74
+ const properties = super.getProperties(featureInfo, layer);
75
+ return {
76
+ ...properties,
77
+ html: parseAndSanitizeMarkdown(
78
+ this._renderTemplate({ ...properties, ...properties.attributes }),
79
+ ),
80
+ };
81
+ }
82
+
83
+ /**
84
+ * @returns {MarkdownFeatureInfoViewOptions}
85
+ */
86
+ toJSON() {
87
+ const config = super.toJSON();
88
+ config.template = Array.isArray(this.template)
89
+ ? this.template.slice()
90
+ : this.template;
91
+ return config;
92
+ }
93
+ }
94
+
95
+ export default MarkdownFeatureInfoView;
package/src/i18n/de.d.ts CHANGED
@@ -142,6 +142,10 @@ declare namespace messages {
142
142
  export let zoomToAnchor: string;
143
143
  export let noAnchor: string;
144
144
  export let invalidDuration: string;
145
+ export let zoom: string;
146
+ let _export: string;
147
+ export { _export as export };
148
+ export let exportPath: string;
145
149
  }
146
150
  export namespace viewpoint {
147
151
  let name_2: string;
@@ -180,7 +184,8 @@ declare namespace messages {
180
184
  export let show: string;
181
185
  export let hide: string;
182
186
  export let create: string;
183
- export let zoom: string;
187
+ let zoom_1: string;
188
+ export { zoom_1 as zoom };
184
189
  export let invalid: string;
185
190
  export let editVertices: string;
186
191
  export let translate: string;
@@ -337,8 +342,8 @@ declare namespace messages {
337
342
  export let editItem: string;
338
343
  let _import_1: string;
339
344
  export { _import_1 as import };
340
- let _export: string;
341
- export { _export as export };
345
+ let _export_1: string;
346
+ export { _export_1 as export };
342
347
  let _delete: string;
343
348
  export { _delete as delete };
344
349
  let edit_1: string;
package/src/i18n/de.js CHANGED
@@ -132,6 +132,9 @@ const messages = {
132
132
  zoomToAnchor: 'Auf Stützpunkt zoomen',
133
133
  noAnchor: 'Es sind noch keine Stützpunkte definiert.',
134
134
  invalidDuration: 'Die Gesamtflugzeit muss größer als Null sein!',
135
+ zoom: 'Auf Ausdehnung zoomen',
136
+ export: 'Flug exportieren',
137
+ exportPath: 'Flugpfad exportieren',
135
138
  },
136
139
  viewpoint: {
137
140
  name: 'Name (ID)',
package/src/i18n/en.d.ts CHANGED
@@ -142,11 +142,16 @@ declare namespace messages {
142
142
  export let zoomToAnchor: string;
143
143
  export let noAnchor: string;
144
144
  export let invalidDuration: string;
145
+ export let zoom: string;
146
+ let _export: string;
147
+ export { _export as export };
148
+ export let exportPath: string;
145
149
  }
146
150
  export namespace viewpoint {
147
151
  let name_2: string;
148
152
  export { name_2 as name };
149
- export let viewpointTitle: string;
153
+ let title_7: string;
154
+ export { title_7 as title };
150
155
  let titlePlaceholder_1: string;
151
156
  export { titlePlaceholder_1 as titlePlaceholder };
152
157
  export let groundPosition: string;
@@ -171,15 +176,16 @@ declare namespace messages {
171
176
  let outOfRange: string;
172
177
  }
173
178
  export namespace extent {
174
- let title_7: string;
175
- export { title_7 as title };
179
+ let title_8: string;
180
+ export { title_8 as title };
176
181
  export let projection: string;
177
182
  export let min: string;
178
183
  export let max: string;
179
184
  export let show: string;
180
185
  export let hide: string;
181
186
  export let create: string;
182
- export let zoom: string;
187
+ let zoom_1: string;
188
+ export { zoom_1 as zoom };
183
189
  export let invalid: string;
184
190
  export let editVertices: string;
185
191
  export let translate: string;
@@ -239,21 +245,21 @@ declare namespace messages {
239
245
  }
240
246
  }
241
247
  export namespace settings {
242
- let title_8: string;
243
- export { title_8 as title };
248
+ let title_9: string;
249
+ export { title_9 as title };
244
250
  let tooltip_3: string;
245
251
  export { tooltip_3 as tooltip };
246
252
  export let languageSelector: string;
247
253
  export namespace theme {
248
- let title_9: string;
249
- export { title_9 as title };
254
+ let title_10: string;
255
+ export { title_10 as title };
250
256
  export let dark: string;
251
257
  export let light: string;
252
258
  }
253
259
  }
254
260
  export namespace help_1 {
255
- let title_10: string;
256
- export { title_10 as title };
261
+ let title_11: string;
262
+ export { title_11 as title };
257
263
  let tooltip_4: string;
258
264
  export { tooltip_4 as tooltip };
259
265
  }
@@ -263,8 +269,8 @@ declare namespace messages {
263
269
  let deactivateToolTitle: string;
264
270
  }
265
271
  export namespace legend {
266
- let title_11: string;
267
- export { title_11 as title };
272
+ let title_12: string;
273
+ export { title_12 as title };
268
274
  let tooltip_5: string;
269
275
  export { tooltip_5 as tooltip };
270
276
  let empty_2: string;
@@ -273,8 +279,8 @@ declare namespace messages {
273
279
  export let defaultLabelText: string;
274
280
  }
275
281
  export namespace search_1 {
276
- let title_12: string;
277
- export { title_12 as title };
282
+ let title_13: string;
283
+ export { title_13 as title };
278
284
  let tooltip_6: string;
279
285
  export { tooltip_6 as tooltip };
280
286
  export let select: string;
@@ -290,31 +296,31 @@ declare namespace messages {
290
296
  export let miscellaneous: string;
291
297
  }
292
298
  export namespace footer {
293
- let title_13: string;
294
- export { title_13 as title };
299
+ let title_14: string;
300
+ export { title_14 as title };
295
301
  export namespace attributions {
296
- let title_14: string;
297
- export { title_14 as title };
302
+ let title_15: string;
303
+ export { title_15 as title };
298
304
  let tooltip_7: string;
299
305
  export { tooltip_7 as tooltip };
300
306
  let empty_3: string;
301
307
  export { empty_3 as empty };
302
308
  }
303
309
  export namespace imprint {
304
- let title_15: string;
305
- export { title_15 as title };
310
+ let title_16: string;
311
+ export { title_16 as title };
306
312
  let tooltip_8: string;
307
313
  export { tooltip_8 as tooltip };
308
314
  }
309
315
  export namespace dataProtection {
310
- let title_16: string;
311
- export { title_16 as title };
316
+ let title_17: string;
317
+ export { title_17 as title };
312
318
  let tooltip_9: string;
313
319
  export { tooltip_9 as tooltip };
314
320
  }
315
321
  export namespace positionDisplay {
316
- let title_17: string;
317
- export { title_17 as title };
322
+ let title_18: string;
323
+ export { title_18 as title };
318
324
  let projection_1: string;
319
325
  export { projection_1 as projection };
320
326
  }
@@ -336,8 +342,8 @@ declare namespace messages {
336
342
  export let editItem: string;
337
343
  let _import_1: string;
338
344
  export { _import_1 as import };
339
- let _export: string;
340
- export { _export as export };
345
+ let _export_1: string;
346
+ export { _export_1 as export };
341
347
  let _delete: string;
342
348
  export { _delete as delete };
343
349
  let edit_1: string;