@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.11

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 (116) hide show
  1. package/README.md +11 -4
  2. package/build/build.js +0 -3
  3. package/build/buildHelpers.js +0 -1
  4. package/build/buildPreview.js +7 -0
  5. package/config/aerowest.config.json +13 -3
  6. package/config/base.config.json +89 -64
  7. package/config/codes.config.json +397 -0
  8. package/config/dev.config.json +169 -0
  9. package/config/graphFeatureInfo.config.json +100 -0
  10. package/config/www.config.json +1232 -0
  11. package/dist/assets/{cesium.eb5667.js → cesium.e67536.js} +0 -0
  12. package/dist/assets/cesium.js +1 -1
  13. package/dist/assets/core.ebf665.js +4 -0
  14. package/dist/assets/core.js +1 -1
  15. package/dist/assets/{index.4ccd4433.js → index.9b213929.js} +1 -1
  16. package/dist/assets/{ol.ef03b1.js → ol.8bbd50.js} +0 -0
  17. package/dist/assets/ol.js +1 -1
  18. package/dist/assets/ui.fdfe0d.css +1 -0
  19. package/dist/assets/ui.fdfe0d.js +68 -0
  20. package/dist/assets/ui.js +1 -1
  21. package/dist/assets/vue.0bb7c6.js +9 -0
  22. package/dist/assets/vue.js +2 -1
  23. package/dist/assets/{vuetify.401a29.css → vuetify.53300f.css} +1 -1
  24. package/dist/assets/{vuetify.401a29.js → vuetify.53300f.js} +71 -71
  25. package/dist/assets/vuetify.js +2 -2
  26. package/dist/index.html +1 -1
  27. package/index.js +36 -5
  28. package/lib/vue.js +1 -0
  29. package/map.config.json +15 -6
  30. package/package.json +6 -7
  31. package/plugins/@vcmap/create-link/fallbackCreateLink.vue +71 -0
  32. package/plugins/@vcmap/create-link/index.js +83 -0
  33. package/plugins/@vcmap/create-link/package.json +6 -0
  34. package/plugins/@vcmap/pluginExample/index.js +1 -1
  35. package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue +20 -3
  36. package/plugins/@vcmap/project-selector/ProjectSelectorComponent.vue +1 -1
  37. package/plugins/@vcmap/project-selector/index.js +1 -1
  38. package/plugins/@vcmap/project-selector/package.json +1 -2
  39. package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue +1 -1
  40. package/plugins/@vcmap/theme-changer/index.js +1 -1
  41. package/plugins/@vcmap/theme-changer/package.json +1 -2
  42. package/plugins/categoryTest/Categories.vue +89 -1
  43. package/plugins/categoryTest/Category.vue +1 -1
  44. package/plugins/simple-graph/README.md +51 -0
  45. package/plugins/simple-graph/SimpleGraphComponent.vue +70 -0
  46. package/plugins/simple-graph/index.js +17 -0
  47. package/plugins/simple-graph/package.json +11 -0
  48. package/plugins/simple-graph/simpleGraphView.js +76 -0
  49. package/plugins/test/editor.vue +1 -1
  50. package/plugins/test/index.js +63 -2
  51. package/plugins/test/windowManagerExample.vue +1 -1
  52. package/src/actions/stateRefAction.js +2 -2
  53. package/src/actions/styleSelector.vue +1 -1
  54. package/src/application/Navbar.vue +13 -2
  55. package/src/application/VcsApp.vue +201 -92
  56. package/src/application/VcsMap.vue +1 -1
  57. package/src/application/VcsSettings.vue +1 -1
  58. package/src/application/vcsAppWrapper.vue +1 -0
  59. package/src/components/form-inputs-controls/VcsCheckbox.vue +13 -0
  60. package/src/components/form-inputs-controls/VcsColorPicker.vue +1 -1
  61. package/src/components/form-inputs-controls/VcsRadio.vue +123 -0
  62. package/src/components/form-output/VcsFormattedNumber.vue +1 -1
  63. package/src/components/lists/VcsActionList.vue +13 -4
  64. package/src/components/lists/VcsTreeview.vue +4 -4
  65. package/src/components/lists/VcsTreeviewLeaf.vue +9 -2
  66. package/src/components/lists/VcsTreeviewSearchbar.vue +1 -2
  67. package/src/components/tables/VcsTable.vue +245 -0
  68. package/src/contentTree/LayerTree.vue +1 -1
  69. package/src/contentTree/contentTreeCollection.js +4 -4
  70. package/src/contentTree/contentTreeItem.js +9 -9
  71. package/src/contentTree/groupContentTreeItem.js +1 -1
  72. package/src/contentTree/layerContentTreeItem.js +15 -1
  73. package/src/contentTree/layerGroupContentTreeItem.js +21 -1
  74. package/src/contentTree/nodeContentTreeItem.js +1 -1
  75. package/src/featureInfo/AddressBalloonComponent.vue +47 -0
  76. package/src/featureInfo/BalloonComponent.vue +138 -0
  77. package/src/featureInfo/abstractFeatureInfoView.js +313 -0
  78. package/src/featureInfo/addressBalloonFeatureInfoView.js +118 -0
  79. package/src/featureInfo/balloonFeatureInfoView.js +151 -0
  80. package/src/featureInfo/balloonHelper.js +132 -0
  81. package/src/featureInfo/featureInfo.js +455 -0
  82. package/src/featureInfo/featureInfoInteraction.js +42 -0
  83. package/src/featureInfo/iframeFeatureInfoView.js +95 -0
  84. package/src/featureInfo/tableFeatureInfoView.js +106 -0
  85. package/src/i18n/de.js +16 -0
  86. package/src/i18n/en.js +16 -0
  87. package/src/i18n/i18nCollection.js +17 -0
  88. package/src/manager/buttonManager.js +5 -5
  89. package/src/manager/categoryManager/ComponentsManager.vue +30 -0
  90. package/src/manager/categoryManager/categoryManager.js +500 -0
  91. package/src/manager/contextMenu/contextMenuComponent.vue +43 -0
  92. package/src/manager/contextMenu/contextMenuInteraction.js +42 -0
  93. package/src/manager/contextMenu/contextMenuManager.js +197 -0
  94. package/src/manager/navbarManager.js +8 -8
  95. package/src/manager/toolbox/ToolboxManager.vue +2 -2
  96. package/src/manager/toolbox/toolboxManager.js +7 -3
  97. package/src/manager/window/WindowComponent.vue +1 -1
  98. package/src/manager/window/WindowManager.vue +5 -3
  99. package/src/manager/window/windowManager.js +118 -14
  100. package/src/navigation/mapNavigation.vue +3 -5
  101. package/src/navigation/overviewMap.js +28 -5
  102. package/src/navigation/vcsCompass.vue +1 -1
  103. package/src/setup.js +0 -2
  104. package/src/state.js +256 -0
  105. package/src/styles/_theming.scss +0 -5
  106. package/src/uiConfig.js +79 -0
  107. package/src/vcsUiApp.js +210 -20
  108. package/src/vuePlugins/vuetify.js +14 -4
  109. package/config/berlin.config.json +0 -510
  110. package/dist/assets/core.216494.js +0 -4
  111. package/dist/assets/ui.99a1a7.css +0 -1
  112. package/dist/assets/ui.99a1a7.js +0 -70
  113. package/dist/assets/vue-composition-api.c5aca1.js +0 -14
  114. package/dist/assets/vue-composition-api.js +0 -2
  115. package/dist/assets/vue.762edd.js +0 -9
  116. package/lib/vue-composition-api.js +0 -2
@@ -1,2 +1,2 @@
1
- export * from "./vuetify.401a29.js";
2
- export { default } from "./vuetify.401a29.js";
1
+ export * from "./vuetify.53300f.js";
2
+ export { default } from "./vuetify.53300f.js";
package/dist/index.html CHANGED
@@ -7,7 +7,7 @@
7
7
  rel="stylesheet"
8
8
  href="https://fonts.googleapis.com/css?family=Titillium+Web"
9
9
  />
10
- <script type="module" crossorigin src="./assets/index.4ccd4433.js"></script>
10
+ <script type="module" crossorigin src="./assets/index.9b213929.js"></script>
11
11
  </head>
12
12
  <body style="height: 100vH;">
13
13
  <noscript>
package/index.js CHANGED
@@ -15,7 +15,12 @@ export {
15
15
  } from './src/actions/stateRefAction.js';
16
16
 
17
17
  export { default as Navbar } from './src/application/Navbar.vue';
18
- export { default as VcsApp } from './src/application/VcsApp.vue';
18
+ export {
19
+ default as VcsApp,
20
+ setupMapNavbar,
21
+ setupPluginMountedListeners,
22
+ setupComponentsWindow,
23
+ } from './src/application/VcsApp.vue';
19
24
  export { default as VcsAppWrapper } from './src/application/vcsAppWrapper.vue';
20
25
  export { default as VcsMap } from './src/application/VcsMap.vue';
21
26
 
@@ -41,10 +46,32 @@ export { default as ViewPointContentTreeItem } from './src/contentTree/viewPoint
41
46
  export { default as WindowComponent } from './src/manager/window/WindowComponent.vue';
42
47
  export { default as WindowComponentHeader } from './src/manager/window/WindowComponentHeader.vue';
43
48
  export { default as VcsWindowManager } from './src/manager/window/WindowManager.vue';
44
- export { WindowManager, WindowSlot, WindowPositions } from './src/manager/window/windowManager.js';
45
-
46
- export { ButtonManager } from './src/manager/buttonManager.js';
49
+ export {
50
+ WindowManager,
51
+ WindowSlot,
52
+ WindowPositions,
53
+ WindowAlignment,
54
+ getFittedWindowPositionOptions,
55
+ getFittedWindowPositionOptionsFromMapEvent,
56
+ getWindowPositionOptions,
57
+ getWindowPositionOptionsFromMapEvent,
58
+ } from './src/manager/window/windowManager.js';
59
+
60
+ export { default as ButtonManager } from './src/manager/buttonManager.js';
47
61
  export { NavbarManager, ButtonLocation, getActionsByLocation } from './src/manager/navbarManager.js';
62
+ export { default as CategoryManager } from './src/manager/categoryManager/categoryManager.js';
63
+ export { default as ComponentsManager } from './src/manager/categoryManager/ComponentsManager.vue';
64
+ export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
65
+ export { default as ContextMenuComponent } from './src/manager/contextMenu/contextMenuComponent.vue';
66
+ export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
67
+
68
+ export { applyKeyMapping, applyValueMapping, default as AbstractFeatureInfoView } from './src/featureInfo/abstractFeatureInfoView.js';
69
+ export { extractNestedKey, default as BalloonFeatureInfoView } from './src/featureInfo/balloonFeatureInfoView.js';
70
+ export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener } from './src/featureInfo/balloonHelper.js';
71
+ export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.vue';
72
+ export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';
73
+ export { default as IframeFeatureInfoView } from './src/featureInfo/iframeFeatureInfoView.js';
74
+ export { default as TableFeatureInfoView } from './src/featureInfo/tableFeatureInfoView.js';
48
75
 
49
76
  export { default as MapNavCompass } from './src/navigation/mapNavCompass.vue';
50
77
  export { default as MapNavigation } from './src/navigation/mapNavigation.vue';
@@ -67,6 +94,7 @@ export {
67
94
  serializePlugin,
68
95
  deserializePlugin,
69
96
  } from './src/pluginHelper.js';
97
+ export { getStateFromURL, createEmptyState, setStateToUrl } from './src/state.js';
70
98
  export { default as VcsUiApp } from './src/vcsUiApp.js';
71
99
  export { default as Icons } from './src/icons/+all.js';
72
100
 
@@ -74,10 +102,13 @@ export { default as VcsButton } from './src/components/buttons/VcsButton.vue';
74
102
  export { default as VcsActionButtonList } from './src/components/buttons/VcsActionButtonList.vue';
75
103
  export { default as VcsTooltip } from './src/components/notification/VcsTooltip.vue';
76
104
 
105
+ export { default as VcsTable } from './src/components/tables/VcsTable.vue';
106
+
77
107
  // export { default as VcsConfirmationDialog } from './src/components/dialogs/VcsConfirmationDialog.vue';
78
108
 
79
109
  export { default as VcsLabel } from './src/components/form-inputs-controls/VcsLabel.vue';
80
110
  export { default as VcsCheckbox } from './src/components/form-inputs-controls/VcsCheckbox.vue';
111
+ export { default as VcsRadio } from './src/components/form-inputs-controls/VcsRadio.vue';
81
112
  // export { default as VcsColorPicker } from './src/components/form-inputs-controls/VcsColorPicker.vue';
82
113
  export { default as VcsFormSection } from './src/components/form-inputs-controls/VcsFormSection.vue';
83
114
  // export { default as VcsInputColumnCoordinates } from './src/components/form-inputs-controls/VcsInputColumnCoordinates.vue';
@@ -89,7 +120,7 @@ export { default as VcsTextArea } from './src/components/form-inputs-controls/Vc
89
120
 
90
121
  export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
91
122
 
92
- export { default as VcsActionList, validateActions } from './src/components/lists/VcsActionList.vue';
123
+ export { default as VcsActionList, validateAction, validateActions } from './src/components/lists/VcsActionList.vue';
93
124
  // export { default as VcsEndlessList } from './src/components/lists/VcsEndlessList.vue';
94
125
  export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
95
126
  export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';
package/lib/vue.js CHANGED
@@ -1 +1,2 @@
1
+ export * from 'vue';
1
2
  export { default } from 'vue';
package/map.config.json CHANGED
@@ -3,8 +3,8 @@
3
3
  {
4
4
  "name": "@vcmap/project-selector",
5
5
  "entry": "plugins/@vcmap/project-selector/index.js",
6
- "selected": "VC Map Base",
7
- "selectedContexts": ["development"],
6
+ "selected": "",
7
+ "selectedContexts": ["development", "codeLists"],
8
8
  "open": true,
9
9
  "projects": [
10
10
  {
@@ -15,11 +15,10 @@
15
15
  ]
16
16
  },
17
17
  {
18
- "name": "VC Map Berlin",
19
- "description": "Berlin DEMO (Standard Hosting Layout)",
18
+ "name": "VC Map Demo",
19
+ "description": "VC Map Demo www.virtualcitymap.de",
20
20
  "contexts": [
21
- { "configUrl": "config/base.config.json" },
22
- { "configUrl": "config/berlin.config.json" }
21
+ { "configUrl": "config/www.config.json" }
23
22
  ]
24
23
  }
25
24
  ],
@@ -28,6 +27,16 @@
28
27
  "name": "development",
29
28
  "description": "context containing examples, showcases and other stuff",
30
29
  "configUrl": "config/dev.config.json"
30
+ },
31
+ {
32
+ "name": "codeLists",
33
+ "description": "context containing code lists for key and attribute mapping",
34
+ "configUrl": "config/codes.config.json"
35
+ },
36
+ {
37
+ "name": "graphFeatureInfo",
38
+ "description": "context adding a graph Feature Info view",
39
+ "configUrl": "config/graphFeatureInfo.config.json"
31
40
  }
32
41
  ]
33
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "5.0.0-rc.10",
3
+ "version": "5.0.0-rc.11",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -42,11 +42,10 @@
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@vcmap/cesium": "~1.93.1",
45
- "@vcmap/core": "^5.0.0-rc.13",
46
- "@vue/composition-api": "~1.4.5",
45
+ "@vcmap/core": "^5.0.0-rc.20",
47
46
  "ol": "~6.13.0",
48
- "vue": "~2.6.14",
49
- "vuetify": "~2.6.3"
47
+ "vue": "~2.7.3",
48
+ "vuetify": "~2.6.7"
50
49
  },
51
50
  "devDependencies": {
52
51
  "@vcmap/rollup-plugin-vcs-ol": "^1.0.1",
@@ -61,8 +60,8 @@
61
60
  "rollup-plugin-strip-pragma": "^1.0.0",
62
61
  "sass": "1.32.13",
63
62
  "typescript": "^4.2.4",
64
- "unplugin-vue-components": "^0.19.6",
65
- "vite": "^2.9.12",
63
+ "unplugin-vue-components": "^0.21.1",
64
+ "vite": "^2.9.13",
66
65
  "vite-plugin-vue2": "^2.0.1",
67
66
  "vitest": "^0.14.2"
68
67
  },
@@ -0,0 +1,71 @@
1
+ <template>
2
+ <v-sheet class="d-flex flew-row align-center pl-2 pr-2">
3
+ <VcsTextField
4
+ :value="localLink"
5
+ class="d-flex col-10 pa-0 mr-2"
6
+ />
7
+ <div class="d-flex col-2 justify-end pa-0">
8
+ <VcsButton
9
+ small
10
+ icon="mdi-content-copy"
11
+ class="mr-2"
12
+ @click="copy"
13
+ :title="$t('createLink.copyToClipboard')"
14
+ />
15
+ <VcsButton
16
+ small
17
+ icon="mdi-refresh"
18
+ class="mr-2"
19
+ @click="refresh"
20
+ :title="$t('createLink.refreshTooltip')"
21
+ />
22
+ </div>
23
+ </v-sheet>
24
+ </template>
25
+
26
+ <script>
27
+ import { VcsTextField, VcsButton, setStateToUrl } from '@vcmap/ui';
28
+ import { getCurrentInstance, inject, ref } from 'vue';
29
+
30
+ export default {
31
+ name: 'FallbackCreateLink',
32
+ props: {
33
+ link: {
34
+ type: String,
35
+ required: true,
36
+ },
37
+ },
38
+ components: {
39
+ VcsTextField,
40
+ VcsButton,
41
+ },
42
+ setup(props) {
43
+ const localLink = ref(props.link);
44
+ const app = inject('vcsApp');
45
+
46
+ const { proxy } = getCurrentInstance();
47
+ const copy = () => {
48
+ const element = proxy.$el.querySelector('input');
49
+ element.select();
50
+ document.execCommand('copy');
51
+ };
52
+
53
+ const refresh = async () => {
54
+ const state = await app.getState(true);
55
+ const url = new URL(window.location.href);
56
+ setStateToUrl(state, url);
57
+ localLink.value = url.toString();
58
+ };
59
+
60
+ return {
61
+ copy,
62
+ refresh,
63
+ localLink,
64
+ };
65
+ },
66
+ };
67
+ </script>
68
+
69
+ <style scoped>
70
+
71
+ </style>
@@ -0,0 +1,83 @@
1
+ import { ButtonLocation, setStateToUrl, WindowSlot } from '@vcmap/ui';
2
+ import FallbackCreateLink from './fallbackCreateLink.vue';
3
+
4
+ const name = '@vcmap/create-link';
5
+ const fallBackWindowId = 'create-link-fallback-window';
6
+ function createFallbackWindow(app, link) {
7
+ app.windowManager.remove(fallBackWindowId);
8
+ app.windowManager.add(
9
+ {
10
+ id: fallBackWindowId,
11
+ component: FallbackCreateLink,
12
+ slot: WindowSlot.DYNAMIC_RIGHT,
13
+ state: {
14
+ headerTitle: 'createLink.windowTitle',
15
+ headerIcon: 'mdi-share-variant',
16
+ },
17
+ props: {
18
+ link,
19
+ },
20
+ },
21
+ name,
22
+ );
23
+ }
24
+
25
+ export default function createLink() {
26
+ return {
27
+ name,
28
+ version: '1.0.0',
29
+ i18n: {
30
+ de: {
31
+ createLink: {
32
+ title: 'Link Kopieren',
33
+ windowTitle: 'Applikationslink',
34
+ tooltip: 'Dialog zum kopieren des Applikationslinks anzeigen.',
35
+ copyToClipboard: 'Applikationslink in Zwischenablage kopieren',
36
+ refreshTooltip: 'Applikationslink aktualisieren',
37
+ },
38
+ },
39
+ en: {
40
+ createLink: {
41
+ title: 'Copy Link',
42
+ windowTitle: 'Application Link',
43
+ tooltip: 'Open dialog to copy application link to clipboard',
44
+ copyToClipboard: 'Copy application link to clipboard',
45
+ refreshTooltip: 'Refresh application link',
46
+ },
47
+ },
48
+ },
49
+ /**
50
+ * @param {VcsUiApp} app
51
+ */
52
+ initialize(app) {
53
+ const title = navigator.clipboard ?
54
+ 'createLink.copyToClipboard' :
55
+ 'createLink.tooltip';
56
+
57
+ app.navbarManager.add(
58
+ {
59
+ action: {
60
+ name: 'createLink.title',
61
+ title,
62
+ icon: 'mdi-share-variant',
63
+ /**
64
+ * @returns {Promise<void>}
65
+ */
66
+ async callback() {
67
+ const state = await app.getState(true);
68
+ const url = new URL(window.location.href);
69
+ setStateToUrl(state, url);
70
+ if (navigator.clipboard) {
71
+ await navigator.clipboard.writeText(url.toString());
72
+ } else {
73
+ createFallbackWindow(app, url.toString());
74
+ }
75
+ },
76
+ },
77
+ },
78
+ name,
79
+ ButtonLocation.SHARE,
80
+ );
81
+ },
82
+ };
83
+ }
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "@vcmap/create-link",
3
+ "version": "1.0.0",
4
+ "vcMapVersion": "~5.0.0",
5
+ "main": "index.js"
6
+ }
@@ -1,4 +1,4 @@
1
- import { ref, reactive, watch } from '@vue/composition-api';
1
+ import { ref, reactive, watch } from 'vue';
2
2
  import { getLogger as getLoggerByName } from '@vcsuite/logger';
3
3
 
4
4
 
@@ -251,6 +251,20 @@
251
251
  />
252
252
  </v-col>
253
253
  </v-row>
254
+ <v-row
255
+ :dense="dense"
256
+ no-gutters
257
+ align="center"
258
+ >
259
+ <v-col>
260
+ <VcsRadio
261
+ :dense="dense"
262
+ :items="[...selectOptions, { label: 'Radio Option E colored', color: 'primary', value: 'E' }]"
263
+ v-model="state.selected"
264
+ row
265
+ />
266
+ </v-col>
267
+ </v-row>
254
268
  <v-row
255
269
  :dense="dense"
256
270
  no-gutters
@@ -287,6 +301,7 @@
287
301
  :disabled="!isValid"
288
302
  :tooltip="'Log current state in console'"
289
303
  :has-update="isValid && newUpdate"
304
+ class="mx-2 mb-2"
290
305
  >
291
306
  Log State
292
307
  </VcsButton>
@@ -299,10 +314,11 @@
299
314
  </v-form>
300
315
  </template>
301
316
  <script>
302
- import { inject, ref, watch } from '@vue/composition-api';
317
+ import { inject, ref, watch } from 'vue';
303
318
  import {
304
319
  VcsSelect,
305
320
  VcsCheckbox,
321
+ VcsRadio,
306
322
  VcsButton,
307
323
  VcsTextField,
308
324
  VcsFormattedNumber,
@@ -318,6 +334,7 @@
318
334
  VcsSelect,
319
335
  VcsTextField,
320
336
  VcsCheckbox,
337
+ VcsRadio,
321
338
  VcsFormattedNumber,
322
339
  VcsFormSection,
323
340
  VcsLabel,
@@ -342,8 +359,8 @@
342
359
  ].join('\n');
343
360
 
344
361
  return {
345
- showSection: true,
346
- dense: true,
362
+ showSection: ref(true),
363
+ dense: ref(true),
347
364
  helpExample,
348
365
  // no object-destruction of reactive objects! or use toRef()
349
366
  state: plugin.state,
@@ -46,7 +46,7 @@
46
46
  </v-container>
47
47
  </template>
48
48
  <script>
49
- import { inject } from '@vue/composition-api';
49
+ import { inject } from 'vue';
50
50
  import ContextsListComponent from './ContextsListComponent.vue';
51
51
 
52
52
  export default {
@@ -1,4 +1,4 @@
1
- import { ref } from '@vue/composition-api';
1
+ import { ref } from 'vue';
2
2
  import { ButtonLocation, createToggleAction } from '@vcmap/ui';
3
3
  import { Context } from '@vcmap/core';
4
4
  import { getLogger } from '@vcsuite/logger';
@@ -8,7 +8,6 @@
8
8
  },
9
9
  "peerDependencies": {
10
10
  "@vcmap/ui": "^5.0.0-rc.11",
11
- "@vcmap/core": "^5.0.0-rc.5",
12
- "@vue/composition-api": "^1.4.5"
11
+ "@vcmap/core": "^5.0.0-rc.5"
13
12
  }
14
13
  }
@@ -64,7 +64,7 @@
64
64
  </v-card>
65
65
  </template>
66
66
  <script>
67
- import { inject } from '@vue/composition-api';
67
+ import { inject } from 'vue';
68
68
 
69
69
  export default {
70
70
  name: 'ThemeChanger',
@@ -1,4 +1,4 @@
1
- import { ref } from '@vue/composition-api';
1
+ import { ref } from 'vue';
2
2
  import { check } from '@vcsuite/check';
3
3
  import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
4
4
  import ThemeChangerComponent from './ThemeChangerComponent.vue';
@@ -6,7 +6,6 @@
6
6
  "@vcsuite/check": "^1.1.2"
7
7
  },
8
8
  "peerDependencies": {
9
- "@vcmap/ui": "5.0.0-rc.2",
10
- "@vue/composition-api": "^1.4.5"
9
+ "@vcmap/ui": "^5.0.0-rc.2"
11
10
  }
12
11
  }
@@ -13,6 +13,7 @@
13
13
  <span>
14
14
  <VcsButton icon="$vcsPlus" @click="newDialog = true" />
15
15
  <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
16
+ <VcsButton @click="addManagedCategories"> Add Categories To Manager </VcsButton>
16
17
  </span>
17
18
 
18
19
  <v-dialog
@@ -56,8 +57,9 @@
56
57
  </template>
57
58
 
58
59
  <script>
59
- import { inject, ref, onUnmounted } from '@vue/composition-api';
60
+ import { inject, ref, onUnmounted } from 'vue';
60
61
  import { VcsButton } from '@vcmap/ui';
62
+ import { GeoJSONLayer } from '@vcmap/core';
61
63
  import Category from './Category.vue';
62
64
 
63
65
  export default {
@@ -133,6 +135,92 @@
133
135
  console.error('not a valid JSON');
134
136
  }
135
137
  },
138
+ async addManagedCategories() {
139
+ if (!app.categories.hasKey('layers')) {
140
+ const layersCat = await app.categories.requestCategory({
141
+ name: 'layers',
142
+ type: 'AppBackedCategory',
143
+ collectionName: 'layers',
144
+ title: 'categories.layers',
145
+ });
146
+ const actions = [{
147
+ name: 'mySuperAction',
148
+ icon: 'mdi-plus',
149
+ callback: () => {
150
+ layersCat.collection.add(new GeoJSONLayer({
151
+ features: [
152
+ {
153
+ type: 'Feature',
154
+ properties: {},
155
+ geometry: {
156
+ type: 'Polygon',
157
+ coordinates: [
158
+ [
159
+ [
160
+ 13.376044753386196,
161
+ 52.51700747314845,
162
+ 34.434221826595746,
163
+ ],
164
+ [
165
+ 13.375890137534464,
166
+ 52.51683412207231,
167
+ 34.43535288837092,
168
+ ],
169
+ [
170
+ 13.376141126603242,
171
+ 52.51641627693124,
172
+ 34.66410424636929,
173
+ ],
174
+ [
175
+ 13.376773170085109,
176
+ 52.516279904694215,
177
+ 34.73478984011562,
178
+ ],
179
+ [
180
+ 13.376887028670879,
181
+ 52.51695485856382,
182
+ 34.72412287410914,
183
+ ],
184
+ [
185
+ 13.376044753386196,
186
+ 52.51700747314845,
187
+ 34.434221826595746,
188
+ ],
189
+ ],
190
+ ],
191
+ },
192
+ }],
193
+ }));
194
+ },
195
+ }];
196
+ app.categoryManager.addCategory(layersCat.name, '@vcmap/categoryTest', actions);
197
+ app.categoryManager.addMappingFunction((item, category) => {
198
+ return category.name === 'layers';
199
+ }, (item, category, treeViewItem) => {
200
+ // eslint-disable-next-line no-console
201
+ const action = {
202
+ name: 'mySuperAction',
203
+ icon: '$vcsSimpleCircleFilled',
204
+ callback: () => {
205
+ console.log(item, category, treeViewItem);
206
+ },
207
+ };
208
+ treeViewItem.actions.push(action);
209
+ treeViewItem.clickable = true;
210
+ treeViewItem.clicked = () => {
211
+ if (!item.active) item.activate(); else item.deactivate();
212
+ };
213
+ const action2 = {
214
+ name: 'mySuperAction3',
215
+ icon: 'mdi-minus',
216
+ callback: () => {
217
+ category.collection.remove(item);
218
+ },
219
+ };
220
+ treeViewItem.actions.push(action2);
221
+ }, ['layers'], '@vcmap/categoryTest');
222
+ }
223
+ },
136
224
  };
137
225
  },
138
226
  };
@@ -48,7 +48,7 @@
48
48
  </template>
49
49
 
50
50
  <script>
51
- import { inject, nextTick, ref } from '@vue/composition-api';
51
+ import { inject, nextTick, ref } from 'vue';
52
52
  import { VcsButton } from '@vcmap/ui';
53
53
  import { getObjectFromClassRegistry } from '@vcmap/core';
54
54
 
@@ -0,0 +1,51 @@
1
+ # VC Map Plugin Simple Graph
2
+
3
+ This is a plugin adding a new Feature Info View using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }.
4
+
5
+ | View class | VueComponent | description |
6
+ |-----------------------------------------|----------------------------------------------------|----------------------------------------------------------|
7
+ | [SimpleGraphView](./simpleGraphView.js) | [SimpleGraphComponent](./SimpleGraphComponent.vue) | A simple graph view including trend lines and bar graph. |
8
+
9
+
10
+ ## configuration
11
+
12
+ See `{FeatureInfoViewOptions}` for general configuration of Feature Views.
13
+ Use `{string[]} attributeKeys` to define, which feature properties contain graph data.
14
+ Use `{WindowComponentOptions} window` to define the position and size of the graph window.
15
+ The graph can be configured as follows:
16
+
17
+ | Property | Type | default | Description |
18
+ |----------|--------------------------|-----------|------------------------------------------------------|
19
+ | labels | string[] &#124; number[] | [] | optional array of strings labeling all data points |
20
+ | graph | string | 'trend' | Choose between a trendline or bars |
21
+ | color | string | 'primary' | optional color of the sparkline of the graph |
22
+ | gradient | string[] | [] | optional array of colors to use as a linear-gradient |
23
+ | fill | boolean | false | if true, filled area below sparkline |
24
+ | smooth | number &#124; string | 8 | optional number of px to use as a corner radius |
25
+
26
+ ### Example
27
+
28
+ ```json
29
+ {
30
+ "type": "SimpleGraphView",
31
+ "name": "graphBar",
32
+ "attributeKeys": [
33
+ "globalRadRoofsMonth_01", "globalRadRoofsMonth_02", "globalRadRoofsMonth_03",
34
+ "globalRadRoofsMonth_04", "globalRadRoofsMonth_05", "globalRadRoofsMonth_06",
35
+ "globalRadRoofsMonth_07", "globalRadRoofsMonth_08", "globalRadRoofsMonth_09",
36
+ "globalRadRoofsMonth_10", "globalRadRoofsMonth_11", "globalRadRoofsMonth_12"
37
+ ],
38
+ "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
39
+ "color": "secondary",
40
+ "graph": "bar",
41
+ "gradient": ["red", "orange", "yellow"],
42
+ "window": {
43
+ "slot": "detached",
44
+ "position": {
45
+ "left": "20%",
46
+ "right": "20%",
47
+ "bottom": "0%"
48
+ }
49
+ }
50
+ }
51
+ ```