@vcmap/ui 5.0.0-rc.16 → 5.0.0-rc.18

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 (67) hide show
  1. package/build/buildHelpers.js +7 -1
  2. package/config/base.config.json +3 -45
  3. package/config/www.config.json +756 -132
  4. package/dist/assets/{cesium.430460.js → cesium.2f992f.js} +0 -0
  5. package/dist/assets/cesium.js +1 -1
  6. package/dist/assets/{core.5089ba.js → core.cb0408.js} +1700 -1718
  7. package/dist/assets/core.js +1 -1
  8. package/dist/assets/{index.854f8e2b.js → index.bccdf969.js} +1 -1
  9. package/dist/assets/{ol.9be53a.js → ol.5e3fd0.js} +0 -0
  10. package/dist/assets/ol.js +1 -1
  11. package/dist/assets/ui.08c48f.css +1 -0
  12. package/dist/assets/{ui.49010a.js → ui.08c48f.js} +6254 -5906
  13. package/dist/assets/ui.js +1 -1
  14. package/dist/assets/{vue.247c1c.js → vue.228ead.js} +0 -0
  15. package/dist/assets/vue.js +2 -2
  16. package/dist/assets/{vuetify.735e58.css → vuetify.0b5039.css} +0 -0
  17. package/dist/assets/{vuetify.735e58.js → vuetify.0b5039.js} +5 -2
  18. package/dist/assets/vuetify.js +2 -2
  19. package/dist/index.html +1 -1
  20. package/index.js +14 -3
  21. package/package.json +2 -2
  22. package/plugins/@vcmap/pluginExample/index.js +2 -1
  23. package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue +7 -0
  24. package/plugins/buttonExamples/ButtonExamples.vue +18 -0
  25. package/plugins/categoryTest/Categories.vue +27 -13
  26. package/plugins/categoryTest/Category.vue +7 -1
  27. package/plugins/categoryTest/index.js +1 -1
  28. package/plugins/package.json +1 -1
  29. package/plugins/test/allIconsComponent.vue +3 -3
  30. package/plugins/test/index.js +9 -5
  31. package/plugins/test/testList.vue +4 -1
  32. package/plugins/test/toolbox-data.js +168 -111
  33. package/plugins/test/vcsContent.vue +1 -1
  34. package/plugins/test/windowManagerExample.vue +9 -7
  35. package/src/actions/actionHelper.js +13 -10
  36. package/src/application/VcsApp.vue +25 -26
  37. package/src/application/VcsNavbar.vue +1 -1
  38. package/src/components/buttons/VcsButton.vue +14 -3
  39. package/src/components/form-inputs-controls/VcsCheckbox.vue +1 -0
  40. package/src/components/form-inputs-controls/VcsFormSection.vue +14 -6
  41. package/src/components/lists/VcsActionList.vue +2 -0
  42. package/src/components/lists/VcsList.vue +4 -2
  43. package/src/contentTree/contentTreeCollection.js +9 -0
  44. package/src/contentTree/layerContentTreeItem.js +3 -3
  45. package/src/featureInfo/BalloonComponent.vue +5 -2
  46. package/src/featureInfo/balloonFeatureInfoView.js +2 -8
  47. package/src/featureInfo/balloonHelper.js +22 -5
  48. package/src/featureInfo/featureInfo.js +1 -2
  49. package/src/i18n/de.js +12 -3
  50. package/src/i18n/en.js +10 -1
  51. package/src/legend/legendHelper.js +6 -7
  52. package/src/legend/vcsLegend.vue +12 -3
  53. package/src/manager/categoryManager/CategoryComponent.vue +115 -0
  54. package/src/manager/categoryManager/CategoryComponentList.vue +57 -0
  55. package/src/manager/categoryManager/CategoryManager.vue +35 -0
  56. package/src/manager/categoryManager/categoryManager.js +251 -165
  57. package/src/manager/contextMenu/contextMenuManager.js +8 -2
  58. package/src/manager/toolbox/ToolboxManager.vue +1 -0
  59. package/src/manager/window/WindowComponent.vue +49 -75
  60. package/src/manager/window/WindowComponentHeader.vue +49 -7
  61. package/src/manager/window/WindowManager.vue +53 -30
  62. package/src/manager/window/windowHelper.js +341 -0
  63. package/src/manager/window/windowManager.js +162 -150
  64. package/src/notifier/notifier.js +4 -5
  65. package/src/vcsUiApp.js +7 -1
  66. package/dist/assets/ui.49010a.css +0 -1
  67. package/src/manager/categoryManager/ComponentsManager.vue +0 -30
package/dist/assets/ui.js CHANGED
@@ -1 +1 @@
1
- export * from "./ui.49010a.js";
1
+ export * from "./ui.08c48f.js";
File without changes
@@ -1,5 +1,5 @@
1
- export * from "./vue.247c1c.js";
2
- import { default as f } from "./vue.247c1c.js";
1
+ export * from "./vue.228ead.js";
2
+ import { default as f } from "./vue.228ead.js";
3
3
  export {
4
4
  f as default
5
5
  };
@@ -1,16 +1,19 @@
1
1
 
2
2
  function loadCss(href) {
3
+ const base64url = href
4
+ .replace(/-/g, '+')
5
+ .replace(/_/g, '/');
3
6
  return new Promise((resolve, reject) => {
4
7
  const elem = document.createElement('link');
5
8
  elem.rel = 'stylesheet';
6
- elem.href = href;
9
+ elem.href = base64url;
7
10
  elem.defer = false;
8
11
  elem.async = false;
9
12
  elem.onload = resolve;
10
13
  elem.onerror = reject;
11
14
  document.head.appendChild(elem);
12
15
  });
13
- } await loadCss('./assets/vuetify.735e58.css');import v from "./vue.247c1c.js";
16
+ } await loadCss('./assets/vuetify.0b5039.css');import v from "./vue.228ead.js";
14
17
  const Ne = v.extend().extend({
15
18
  name: "themeable",
16
19
  provide() {
@@ -1,5 +1,5 @@
1
- export * from "./vuetify.735e58.js";
2
- import { default as f } from "./vuetify.735e58.js";
1
+ export * from "./vuetify.0b5039.js";
2
+ import { default as f } from "./vuetify.0b5039.js";
3
3
  export {
4
4
  f as default
5
5
  };
package/dist/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
- <script type="module" crossorigin src="./assets/index.854f8e2b.js"></script>
6
+ <script type="module" crossorigin src="./assets/index.bccdf969.js"></script>
7
7
  </head>
8
8
  <body style="height: 100vH;">
9
9
  <noscript>
package/index.js CHANGED
@@ -21,7 +21,7 @@ export {
21
21
  default as VcsApp,
22
22
  setupMapNavbar,
23
23
  setupPluginMountedListeners,
24
- setupComponentsWindow,
24
+ setupCategoryManagerWindow,
25
25
  } from './src/application/VcsApp.vue';
26
26
  export { default as VcsAppWrapper } from './src/application/vcsAppWrapper.vue';
27
27
  export { default as VcsMap } from './src/application/VcsMap.vue';
@@ -52,18 +52,29 @@ export {
52
52
  default as WindowManager,
53
53
  WindowSlot,
54
54
  WindowPositions,
55
+ posToPixel,
56
+ windowPositionFromOptions,
57
+ } from './src/manager/window/windowManager.js';
58
+ export {
55
59
  WindowAlignment,
56
60
  getFittedWindowPositionOptions,
57
61
  getFittedWindowPositionOptionsFromMapEvent,
58
62
  getWindowPositionOptions,
59
63
  getWindowPositionOptionsFromMapEvent,
60
- } from './src/manager/window/windowManager.js';
64
+ posToNumber,
65
+ posToPercent,
66
+ optionsFromWindowPosition,
67
+ updateWindowPosition,
68
+ clipToTargetSize,
69
+ moveWindow,
70
+ applyPositionOnTarget,
71
+ } from './src/manager/window/windowHelper.js';
61
72
 
62
73
  export { default as ButtonManager } from './src/manager/buttonManager.js';
63
74
  export { default as NavbarManager, ButtonLocation, getActionsByLocation } from './src/manager/navbarManager.js';
64
75
  export { default as ToolboxManager, ToolboxType } from './src/manager/toolbox/toolboxManager.js';
65
76
  export { default as CategoryManager } from './src/manager/categoryManager/categoryManager.js';
66
- export { default as ComponentsManager } from './src/manager/categoryManager/ComponentsManager.vue';
77
+ export { default as CategoryManagerComponent } from './src/manager/categoryManager/CategoryManager.vue';
67
78
  export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
68
79
  export { default as ContextMenuComponent } from './src/manager/contextMenu/contextMenuComponent.vue';
69
80
  export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vcmap/ui",
3
- "version": "5.0.0-rc.16",
3
+ "version": "5.0.0-rc.18",
4
4
  "author": "Virtual City Systems",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -43,7 +43,7 @@
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@vcmap/cesium": "~1.97.1",
46
- "@vcmap/core": "~5.0.0-rc.24",
46
+ "@vcmap/core": "~5.0.0-rc.25",
47
47
  "ol": "~7.1.0",
48
48
  "vue": "~2.7.3",
49
49
  "vuetify": "~2.6.7"
@@ -80,7 +80,7 @@ export default function (config) {
80
80
  conditionalInput: '',
81
81
  initialTextInput: pluginConfig.initialTextInput.value,
82
82
  numberInput: 100.156,
83
- checkboxInput: false,
83
+ checkboxInput: true,
84
84
  email: '',
85
85
  prependedInput: '',
86
86
  files: [],
@@ -169,6 +169,7 @@ export default function (config) {
169
169
  headerTitle: 'pluginExample.title',
170
170
  headerIcon: '$vcsCircle',
171
171
  headerActions: actions,
172
+ infoUrl: 'https://vc.systems',
172
173
  },
173
174
  props: {
174
175
  actions,
@@ -3,6 +3,7 @@
3
3
  <VcsFormSection
4
4
  heading="VcsFormSection Select & Text Inputs"
5
5
  :header-actions="actions"
6
+ :action-button-list-overflow-count="4"
6
7
  >
7
8
  <template #help>
8
9
  <ol>
@@ -305,6 +306,12 @@
305
306
  <VcsFormSection
306
307
  heading="VcsFormSection Mixed Inputs"
307
308
  >
309
+ <template #header="{ heading }">
310
+ <article class="pa-2 secondary text--primary">
311
+ {{ heading }}
312
+ <h3>This is a custom header using header slot</h3>
313
+ </article>
314
+ </template>
308
315
  <template #default>
309
316
  <v-container>
310
317
  <v-row
@@ -32,6 +32,18 @@
32
32
  <v-switch v-model="active" />
33
33
  </v-list-item-action>
34
34
  </v-list-item>
35
+ <v-divider />
36
+ <v-list-item>
37
+ <v-list-item-content>
38
+ <v-list-item-title class="font-weight-bold">
39
+ ACTIVE BACKGROUND
40
+ </v-list-item-title>
41
+ </v-list-item-content>
42
+ <v-list-item-action>
43
+ <v-switch v-model="background" />
44
+ </v-list-item-action>
45
+ </v-list-item>
46
+ <v-divider />
35
47
  <v-list-item>
36
48
  <v-list-item-content>
37
49
  <v-list-item-title class="font-weight-bold">
@@ -56,6 +68,7 @@
56
68
  <VcsButton
57
69
  @click="toggle"
58
70
  :active="active"
71
+ :background="background"
59
72
  color="primary"
60
73
  :disabled="disabled"
61
74
  :has-update="update"
@@ -74,6 +87,7 @@
74
87
  <VcsButton
75
88
  @click="toggle"
76
89
  :active="active"
90
+ :background="background"
77
91
  :disabled="disabled"
78
92
  :has-update="update"
79
93
  tooltip="SECONDARY BUTTON"
@@ -101,6 +115,7 @@
101
115
  @click="toggle"
102
116
  :active="active"
103
117
  :disabled="disabled"
118
+ :background="background"
104
119
  :has-update="update"
105
120
  :icon="loading ? '$vcsProgress' : '$vcs3d'"
106
121
  tooltip="ButtonClass large"
@@ -141,6 +156,7 @@
141
156
  <VcsButton
142
157
  @click="toggle"
143
158
  :active="active"
159
+ :background="background"
144
160
  :disabled="disabled"
145
161
  :icon="loading ? '$vcsProgress' : '$vcsColorSwatch'"
146
162
  tooltip="ACTION BUTTON"
@@ -205,12 +221,14 @@
205
221
  },
206
222
  setup() {
207
223
  const active = ref(false);
224
+ const background = ref(false);
208
225
  const disabled = ref(false);
209
226
  const update = ref(false);
210
227
  const loading = ref(false);
211
228
 
212
229
  return {
213
230
  active,
231
+ background,
214
232
  disabled,
215
233
  update,
216
234
  loading,
@@ -13,9 +13,9 @@
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
+ <VcsButton @click="addManagedCategories">Add Categories To Manager</VcsButton>
17
+ <VcsButton @click="addFoobar">Add Foobar</VcsButton>
17
18
  </span>
18
-
19
19
  <v-dialog
20
20
  v-model="newDialog"
21
21
  >
@@ -121,17 +121,36 @@
121
121
  'viewpoints',
122
122
  'styles',
123
123
  ],
124
+ async addFoobar() {
125
+ if (!app.categories.hasKey('foobar')) {
126
+ const category = await app.categories.requestCategory({
127
+ name: 'foobar',
128
+ type: 'Category',
129
+ title: 'Foobar',
130
+ });
131
+ app.categoryManager.add({ categoryName: category.name }, '@vcmap/categoryTest');
132
+ app.categoryManager.addMappingFunction(() => true, (item, c, listItem) => {
133
+ listItem.title = item.name;
134
+ }, [category.name], '@vcmap/categoryTest');
135
+ for (let i = 0; i <= 12; i++) {
136
+ category.collection.add({
137
+ name: `foobar-${i}`,
138
+ });
139
+ }
140
+ }
141
+ },
124
142
  async add() {
125
143
  const { value: newCategoryValue } = newCategory;
126
144
  if (newCategoryValue.type === 'AppBackedCategory') {
127
145
  newCategoryValue.name = newCategoryValue.collectionName;
128
146
  }
129
- await app.categories.requestCategory(newCategoryValue);
147
+ const category = await app.categories.requestCategory(newCategoryValue);
130
148
  newCategory.value = {
131
149
  name: 'new',
132
- type: 'category.Category',
150
+ type: 'Category',
133
151
  collectionName: null,
134
152
  };
153
+ app.categoryManager.add({ categoryName: category.name }, '@vcmap/categoryTest');
135
154
  newDialog.value = false;
136
155
  },
137
156
  async upload() {
@@ -141,10 +160,11 @@
141
160
  console.error('must provide name');
142
161
  return;
143
162
  }
144
- await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
163
+ const category = await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
145
164
  if (jsonUpload?.items?.length > 0) {
146
165
  await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicContextId);
147
166
  }
167
+ app.categoryManager.add({ categoryName: category.name }, '@vcmap/categoryTest');
148
168
  uploadString.value = '';
149
169
  uploadDialog.value = false;
150
170
  } catch (e) {
@@ -209,10 +229,8 @@
209
229
  }));
210
230
  },
211
231
  }];
212
- app.categoryManager.addCategory(layersCat.name, '@vcmap/categoryTest', actions);
213
- app.categoryManager.addMappingFunction((item, category) => {
214
- return category.name === 'layers';
215
- }, (item, category, treeViewItem) => {
232
+ app.categoryManager.add({ categoryName: layersCat.name, actions }, '@vcmap/categoryTest');
233
+ app.categoryManager.addMappingFunction(() => true, (item, category, treeViewItem) => {
216
234
  // eslint-disable-next-line no-console
217
235
  const action = {
218
236
  name: 'mySuperAction',
@@ -222,10 +240,6 @@
222
240
  },
223
241
  };
224
242
  treeViewItem.actions.push(action);
225
- treeViewItem.clickable = true;
226
- treeViewItem.clicked = () => {
227
- if (!item.active) item.activate(); else item.deactivate();
228
- };
229
243
  const action2 = {
230
244
  name: 'mySuperAction3',
231
245
  icon: 'mdi-minus',
@@ -65,6 +65,8 @@
65
65
  VCard,
66
66
  VForm,
67
67
  VTextarea,
68
+ VSheet,
69
+ VBtn,
68
70
  } from 'vuetify/lib';
69
71
 
70
72
  export default {
@@ -80,6 +82,8 @@
80
82
  VCard,
81
83
  VForm,
82
84
  VTextarea,
85
+ VSheet,
86
+ VBtn,
83
87
  },
84
88
  props: {
85
89
  categoryName: {
@@ -95,6 +99,7 @@
95
99
  const category = ref([]);
96
100
  const downloadLink = ref('');
97
101
  const open = ref(true);
102
+ const link = ref(null);
98
103
  if (categoryObject) {
99
104
  category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
100
105
  }
@@ -105,6 +110,7 @@
105
110
  jsonString,
106
111
  downloadLink,
107
112
  open,
113
+ link,
108
114
  async addItem() {
109
115
  try {
110
116
  const config = JSON.parse(jsonString.value);
@@ -126,7 +132,7 @@
126
132
  downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
127
133
  if (downloadLink.value) {
128
134
  nextTick(() => {
129
- this.$refs.link.click();
135
+ link.value.click();
130
136
  });
131
137
  }
132
138
  },
@@ -7,7 +7,7 @@ import Categories from './Categories.vue';
7
7
  export default async function categoryTest() {
8
8
  return {
9
9
  name: '@vcmap/categoryTest',
10
- onVcsAppMounted(app) {
10
+ initialize(app) {
11
11
  const { action, destroy } = createToggleAction(
12
12
  {
13
13
  name: 'Category Editor',
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "dependencies": {
3
3
  "@vcmap/hello-world": "^1.0.7",
4
- "@vcmap/print": "^1.0.1"
4
+ "@vcmap/print": "^1.0.2"
5
5
  }
6
6
  }
@@ -44,7 +44,7 @@
44
44
  </script>
45
45
 
46
46
  <style scoped>
47
- .icons-window {
48
- max-height: 600px;
49
- }
47
+ /*.icons-window {*/
48
+ /* max-height: 600px;*/
49
+ /*}*/
50
50
  </style>
@@ -3,7 +3,7 @@ import { Feature } from 'ol';
3
3
  import {
4
4
  ButtonLocation, createModalAction, createToggleAction, setStateToUrl, ToolboxType, WindowSlot,
5
5
  } from '@vcmap/ui';
6
- import { toolboxData } from './toolbox-data.js';
6
+ import { getToolboxData } from './toolbox-data.js';
7
7
  import editor from './editor.vue';
8
8
  import windowManagerExample from './windowManagerExample.vue';
9
9
  import AllIconsComponent from './allIconsComponent.vue';
@@ -73,7 +73,7 @@ export default async function () {
73
73
  app.windowManager,
74
74
  '@vcmap/test',
75
75
  );
76
- const { action: clipboardDialogAction, destroy: destroryClipboardDialogAction } = createModalAction(
76
+ const { action: clipboardDialogAction, destroy: destroyClipboardDialogAction } = createModalAction(
77
77
  {
78
78
  name: 'Create Link',
79
79
  },
@@ -86,7 +86,9 @@ export default async function () {
86
86
  };
87
87
  },
88
88
  async created() {
89
- this.url = setStateToUrl(await app.getState(true)).toString();
89
+ const url = new URL(window.location.href);
90
+ setStateToUrl(await app.getState(true), url);
91
+ this.url = url.toString();
90
92
  },
91
93
  },
92
94
  position: {
@@ -95,7 +97,7 @@ export default async function () {
95
97
  right: '8%',
96
98
  },
97
99
  },
98
- app.windowManager,
100
+ app,
99
101
  '@vcmap/test',
100
102
  );
101
103
  const { action: listAction, destroy: destroyList } = createToggleAction(
@@ -117,7 +119,7 @@ export default async function () {
117
119
  destroyConfigEditorAction,
118
120
  destroyWindowAction,
119
121
  destroyIconAction,
120
- destroryClipboardDialogAction,
122
+ destroyClipboardDialogAction,
121
123
  destroyList,
122
124
  ];
123
125
  const alertAction = {
@@ -160,6 +162,7 @@ export default async function () {
160
162
  '@vcmap/test',
161
163
  ButtonLocation.TOOL,
162
164
  );
165
+ const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
163
166
  toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
164
167
  let group;
165
168
  if (app.toolboxManager.has(toolboxComponentOptions.id)) {
@@ -171,6 +174,7 @@ export default async function () {
171
174
  buttonComponents.forEach(c => group.buttonManager.add(c, owner));
172
175
  }
173
176
  });
177
+ this._destroyActions.push(destroyToolboxData);
174
178
 
175
179
  app.contextMenuManager.addEventHandler(async (event) => {
176
180
  const actions = [{
@@ -123,6 +123,7 @@
123
123
  title: 'Foo',
124
124
  tooltip: 'this is the foo',
125
125
  icon: 'mdi-pen',
126
+ selectionChanged: value => console.log('changed cb foo', value),
126
127
  },
127
128
  {
128
129
  name: 'bar',
@@ -136,11 +137,13 @@
136
137
  },
137
138
  },
138
139
  ],
140
+ selectionChanged: value => console.log('changed cb bar', value),
139
141
  },
140
142
  {
141
- name: 'bar',
143
+ name: 'baz',
142
144
  title: 'Baz',
143
145
  tooltip: 'special baz',
146
+ selectionChanged: value => console.log('bchanged cb baz', value),
144
147
  },
145
148
  ];
146
149