@vcmap/ui 5.1.8 → 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.
- package/build/buildTypes.js +9 -0
- package/config/base.config.json +33 -2
- package/config/dev.config.json +22 -2
- package/dist/assets/cesium.js +1 -1
- package/dist/assets/{core.45041e.js → core.627882.js} +4160 -4041
- package/dist/assets/core.js +1 -1
- package/dist/assets/index-76acacac.js +1 -0
- package/dist/assets/ol.js +1 -1
- package/dist/assets/{ui.74ba2a.css → ui.895896.css} +2 -2
- package/dist/assets/{ui.74ba2a.js → ui.895896.js} +8628 -7657
- package/dist/assets/ui.js +1 -1
- package/dist/assets/vue.js +2 -2
- package/dist/assets/{vuetify.72ace9.js → vuetify.1621f3.js} +1 -1
- package/dist/assets/vuetify.js +2 -2
- package/dist/index.html +1 -1
- package/index.d.ts +16 -0
- package/index.js +23 -0
- package/package.json +2 -2
- package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue +110 -37
- package/plugins/@vcmap-show-case/collection-manager-example/src/index.js +4 -0
- package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue +10 -3
- package/plugins/@vcmap-show-case/panel-tester/README.md +3 -0
- package/plugins/@vcmap-show-case/panel-tester/package.json +5 -0
- package/plugins/@vcmap-show-case/panel-tester/src/IframePanelExample.vue +15 -0
- package/plugins/@vcmap-show-case/panel-tester/src/ImgPanelExample.vue +19 -0
- package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue +128 -0
- package/plugins/@vcmap-show-case/panel-tester/src/TextPanelExample.vue +34 -0
- package/plugins/@vcmap-show-case/panel-tester/src/index.js +63 -0
- package/src/actions/actionHelper.js +1 -1
- package/src/actions/flightActions.d.ts +38 -2
- package/src/actions/flightActions.js +257 -6
- package/src/application/VcsApp.vue +4 -104
- package/src/application/VcsApp.vue.d.ts +0 -6
- package/src/application/VcsContainer.vue +105 -0
- package/src/application/VcsContainer.vue.d.ts +14 -0
- package/src/application/VcsMainMap.vue +68 -0
- package/src/application/VcsMainMap.vue.d.ts +9 -0
- package/src/application/markdownHelper.d.ts +7 -0
- package/src/application/markdownHelper.js +57 -1
- package/src/components/form-inputs-controls/VcsRadioGrid.vue +27 -42
- package/src/contentTree/LayerTree.vue +40 -14
- package/src/downloadHelper.d.ts +0 -2
- package/src/downloadHelper.js +2 -4
- package/src/featureInfo/BalloonComponent.vue +31 -3
- package/src/featureInfo/BalloonComponent.vue.d.ts +1 -0
- package/src/featureInfo/MarkdownBalloonComponent.vue +24 -0
- package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts +12 -0
- package/src/featureInfo/abstractFeatureInfoView.js +54 -22
- package/src/featureInfo/addressBalloonFeatureInfoView.d.ts +2 -2
- package/src/featureInfo/addressBalloonFeatureInfoView.js +1 -1
- package/src/featureInfo/balloonFeatureInfoView.js +1 -1
- package/src/featureInfo/balloonHelper.js +16 -9
- package/src/featureInfo/featureInfo.js +10 -0
- package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts +47 -0
- package/src/featureInfo/markdownBalloonFeatureInfoView.js +81 -0
- package/src/featureInfo/markdownFeatureInfoView.d.ts +47 -0
- package/src/featureInfo/markdownFeatureInfoView.js +95 -0
- package/src/i18n/de.d.ts +8 -3
- package/src/i18n/de.js +3 -0
- package/src/i18n/en.d.ts +32 -26
- package/src/i18n/en.js +4 -1
- package/src/manager/collectionManager/CollectionComponent.vue +12 -49
- package/src/manager/collectionManager/CollectionComponent.vue.d.ts +5 -9
- package/src/manager/collectionManager/CollectionComponentContent.vue +102 -0
- package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts +17 -0
- package/src/manager/collectionManager/CollectionComponentList.vue +10 -2
- package/src/manager/collectionManager/CollectionComponentList.vue.d.ts +9 -0
- package/src/manager/collectionManager/CollectionComponentStandalone.vue +91 -0
- package/src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts +9 -0
- package/src/manager/collectionManager/collectionManager.d.ts +2 -2
- package/src/manager/collectionManager/collectionManager.js +21 -19
- package/src/manager/panel/PanelComponent.vue +110 -0
- package/src/manager/panel/PanelComponent.vue.d.ts +19 -0
- package/src/manager/panel/PanelManagerComponent.vue +224 -0
- package/src/manager/panel/PanelManagerComponent.vue.d.ts +36 -0
- package/src/manager/panel/panelHelper.d.ts +83 -0
- package/src/manager/panel/panelHelper.js +272 -0
- package/src/manager/panel/panelManager.d.ts +338 -0
- package/src/manager/panel/panelManager.js +381 -0
- package/src/manager/window/WindowManager.vue +14 -0
- package/src/manager/window/windowHelper.js +1 -1
- package/src/search/ResultItem.vue +1 -1
- package/src/search/search.d.ts +2 -2
- package/src/search/search.js +2 -2
- package/src/vcsUiApp.d.ts +14 -0
- package/src/vcsUiApp.js +18 -0
- package/dist/assets/index-3cd5a3f3.js +0 -1
- /package/dist/assets/{cesium.035e3a.js → cesium.9e39f4.js} +0 -0
- /package/dist/assets/{ol.eb3bee.js → ol.fe8c0e.js} +0 -0
- /package/dist/assets/{vue.17a8fa.js → vue.4b3319.js} +0 -0
- /package/dist/assets/{vuetify.72ace9.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 (
|
129
|
-
attributes
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
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
|
-
|
398
|
-
|
399
|
-
|
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("./
|
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("./
|
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("./
|
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
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
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
|
-
|
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
|
341
|
-
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
|
-
|
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
|
175
|
-
export {
|
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
|
-
|
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
|
243
|
-
export {
|
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
|
249
|
-
export {
|
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
|
256
|
-
export {
|
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
|
267
|
-
export {
|
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
|
277
|
-
export {
|
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
|
294
|
-
export {
|
299
|
+
let title_14: string;
|
300
|
+
export { title_14 as title };
|
295
301
|
export namespace attributions {
|
296
|
-
let
|
297
|
-
export {
|
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
|
305
|
-
export {
|
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
|
311
|
-
export {
|
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
|
317
|
-
export {
|
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
|
340
|
-
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;
|