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

package/src/manager/toolbox/ToolboxGroupComponent.vue

@@ -8,6 +8,7 @@
       :active="singleActionButton.active"
       @click.stop="singleActionButton.callback($event)"
       v-bind="{...$attrs}"
+      large
     />
     <VcsButton
       v-else-if="groupButtons.length > 0"
@@ -17,6 +18,7 @@
       :tooltip="groupTitle"
       :active="active"
       @click="$emit('click')"
+      large
     >
       <v-icon v-text="active ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
     </VcsButton>
@@ -24,8 +26,7 @@
       v-if="active"
       dense
       absolute
-      :width="width"
-      class="toolbar__secondary rounded-b mx-auto v-sheet mt-12 px-4"
+      class="toolbar__secondary rounded-b mx-auto v-sheet mt-12 px-4 second-toolbar"
       :style="{left: `${nudgeLeft}px` }"
     >
       <v-toolbar-items class="w-full">
@@ -37,9 +38,9 @@
             :icon="button.icon"
             :active="button.active"
             @click.stop="button.callback($event)"
-            small
             :width="buttonSize"
             v-bind="{...$attrs}"
+            large
           />
         </div>
       </v-toolbar-items>
@@ -53,6 +54,9 @@
 .v-toolbar.v-sheet {
   background-color: #ffffffda;
 }
+.second-toolbar{
+  display: table;
+}
 </style>
 <script>
 

package/src/manager/toolbox/ToolboxManager.vue

@@ -3,7 +3,8 @@
   <v-toolbar
     v-if="toolboxOpen && actionGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
     dense
-    class="vcs-toolbox toolbar__secondary rounded-b mx-auto v-sheet marginToTop"
+    class="vcs-toolbox toolbar__secondary mx-auto v-sheet marginToTop"
+    :class="{ 'rounded-b': groupId === null }"
     :width="width"
   >
     <v-toolbar-items class="w-full">

package/src/pluginHelper.js

@@ -19,6 +19,39 @@ export const vcsAppSymbol = Symbol('vcsApp');
  */
 export const pluginFactorySymbol = Symbol('pluginFactory');
 
+/**
+ * A symbol added to each plugin which describes the base URL from which the plugin was loaded (without the filename)
+ * @type {symbol}
+ */
+export const pluginBaseUrlSymbol = Symbol('pluginBaseUrl');
+
+/**
+ * A helper function to create an absolute URL from a relative plugin asset URL. For example, when
+ * shipping your plugin with a "plugin-asset/icon.png", you can always retrieve said icon with getPluginAssetUrl(app, name, 'pluing-assets/icon.png')
+ * Returns null, if the plugin does not exist.
+ * @param {VcsUiApp} app
+ * @param {string} pluginName
+ * @param {string} asset
+ * @returns {string|null}
+ */
+export function getPluginAssetUrl(app, pluginName, asset) {
+  check(pluginName, String);
+  check(asset, String);
+
+  const plugin = app.plugins.getByKey(pluginName);
+  if (plugin && plugin[pluginBaseUrlSymbol]) {
+    const baseUrl = new URL(plugin[pluginBaseUrlSymbol]);
+    const assetUrl = new URL(asset.replace(/^\//, '/'), baseUrl);
+    baseUrl.searchParams.forEach((value, key) => {
+      if (!assetUrl.searchParams.has(key)) {
+        assetUrl.searchParams.set(key, value);
+      }
+    });
+    return assetUrl.toString();
+  }
+  return null;
+}
+
 /**
  * validates the name according to package name pattern
  * @param {string} name
@@ -32,18 +65,14 @@ export function isValidPackageName(name) {
 }
 
 /**
- * @param {VcsUiApp} app
  * @param {string} name
  * @param {PluginConfig} config
- * @param {string} [registry='https://plugins.virtualcitymap.de/']
  * @returns {Promise<VcsPlugin|null>}
  */
-export async function loadPlugin(app, name, config, registry = 'https://plugins.virtualcitymap.de/') {
+export async function loadPlugin(name, config) {
   let module = config.entry;
 
-  if (!module) {
-    module = `${registry.replace(/\/?$/, '')}/${name}/${config.version || '*'}/index.js`;
-  } else if (!/^(https?:\/\/|\/)/.test(module)) {
+  if (!/^(https?:\/\/|\/)/.test(module)) {
     module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
@@ -65,7 +94,9 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
       getLogger().error(`plugin ${name} does not provide a default exported function`);
       return null;
     }
-    const pluginInstance = await plugin.default(config);
+    const baseUrl = new URL(module);
+    baseUrl.pathname = baseUrl.pathname.replace(/\/[^/]+$/, '/');
+    const pluginInstance = await plugin.default(config, baseUrl.toString());
 
     if (!pluginInstance.name) {
       getLogger().error(`plugin ${name} does not expose a name`);
@@ -75,6 +106,7 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
       return null;
     }
     pluginInstance[pluginFactorySymbol] = plugin.default;
+    pluginInstance[pluginBaseUrlSymbol] = baseUrl.toString();
     return pluginInstance;
   } catch (err) {
     getLogger().error(`failed to load plugin ${name}`);
@@ -89,9 +121,8 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
  */
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
-  if (plugin[pluginFactorySymbol]) {
-    serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
-  }
+  serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
+  serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;
 }
 
@@ -102,5 +133,6 @@ export function serializePlugin(plugin) {
 export async function deserializePlugin(serializedPlugin) {
   const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
   reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+  reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
   return reincarnation;
 }

package/src/styles/variables.scss

@@ -55,6 +55,7 @@ $list-padding: 0 0; // 8px 0 !default;
 $list-item-title-font-size: $font-size; // map-deep-get($headings, 'subtitle-1', 'size') !default;
 $list-item-dense-title-font-size: $font-size; // 0.8125rem !default;
 $list-item-dense-title-line-height: 24px; // 1rem !default;
+$list-dense-subheader-height: 32px; // 40px !default;
 $list-item-min-height: 32px; // 48px !default;
 $list-dense-min-height: 24px; // 40px !default;
 $list-item-content-padding: 4px 0; // 12px 0 !default;
@@ -68,3 +69,9 @@ $list-item-icon-margin: auto 0; // 16px 0 !default;
 $treeview-node-level-width: 16px;
 $treeview-node-margin: 4px;
 $treeview-node-height: 32px; // 48px !default;
+
+/** Expansion Panel */
+$expansion-panel-header-min-height: 32px; // 48px !default;
+$expansion-panel-active-header-min-height: 32px; // 64px !default;
+$expansion-panel-header-padding: 6px 0; // 16px 24px !default;
+$expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;

package/src/styles/vcsFont.scss

@@ -1,3 +1,20 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 // fonts
 $base-font-size: 14px; // base font-size minimum size
 

package/src/vcsUiApp.js

@@ -47,6 +47,7 @@ import { createEmptyState, getStateFromURL } from './state.js';
  * @callback createPlugin
  * @template {Object} P
  * @param {P} config
+ * @param {string} pluginBaseUrl
  * @returns {VcsPlugin<P>}
  */
 
@@ -343,7 +344,7 @@ class VcsUiApp extends VcsApp {
     const { config } = context;
     if (Array.isArray(config.plugins)) {
       const plugins = await Promise.all(config.plugins.map(async (pluginConfig) => {
-        const plugin = await loadPlugin(this, pluginConfig.name, pluginConfig);
+        const plugin = await loadPlugin(pluginConfig.name, pluginConfig);
         if (!plugin) {
           return null;
         }