@vcmap/ui 5.0.0-rc.10

package/src/styles/utils/_text.scss

@@ -0,0 +1,30 @@
+.font-size-14 {
+  font-size: 14px !important;
+}
+.font-size-12 {
+  font-size: 12px !important;
+}
+
+.line-height-1\.2 {
+  line-height: 1.2 !important;
+}
+
+.line-height-30px {
+  line-height: 30px;
+}
+
+.line-height-1 {
+  line-height: 1 !important;
+}
+
+strong.caption {
+  font-weight: bolder !important;
+}
+
+.theme--light.v-icon {
+  color: inherit !important;
+}
+
+#app.theme--light.v-application .text--primary {
+  color: var(--v-primary-base) !important;
+}

package/src/styles/utils/_transform.scss

@@ -0,0 +1,11 @@
+.flip-vertical {
+  transform: scale(-1, 1);
+}
+
+.rotate {
+  transition: 0.1s transform ease;
+
+  &-180--right {
+    transform: rotate(-180deg);
+  }
+}

package/src/styles/utils/_transition.scss

@@ -0,0 +1,11 @@
+.transition-color-100-ease {
+  transition: color 0.1s ease;
+}
+
+.transition-transform-100-ease {
+  transition: transform 0.1s ease;
+}
+
+.transition-transform-200-ease {
+  transition: transform 0.2s ease;
+}

package/src/styles/utils/_z-index.scss

@@ -0,0 +1,15 @@
+.z-index-1 {
+  z-index: 1;
+}
+
+.z-index-2 {
+  z-index: 2;
+}
+
+.z-index-99 {
+  z-index: 99;
+}
+
+.z-index-100 {
+  z-index: 100;
+}

package/src/styles/variables.scss

@@ -0,0 +1,70 @@
+/** Global **/
+$font-size: 14px;
+$font-size-root: 14px;
+
+// input font and icon
+$input-font-size: $font-size;
+$input-icon-height: 16px; // 24px !default;
+$input-icon-width: 16px; // 24px !default;
+$input-icon-min-width: 16px; // 24px !default;
+
+
+/** VcsTextfield **/
+
+// height, size and padding
+$text-field-padding: 2px 0 1px; //8px 0 8px !default;
+$text-field-filled-full-width-outlined-slot-min-height: 32px; // 56px !default;
+$text-field-filled-full-width-outlined-single-line-slot-min-height: 24px; //40px !default;
+$text-field-solo-control-min-height: 30px; //48px !default;
+$text-field-solo-dense-control-min-height: 22px; //38px !default;
+$text-field-outlined-fieldset-border: 1px solid currentColor; // 2px solid currentColor !default;
+
+// dense non outlined
+$text-field-dense-padding: 2px 0px 1px; //4px 0 2px !default;
+
+// clear icon non dense
+$text-field-enclosed-prepend-append-margin-top: 9px;
+
+// tooltip icon in append slot
+$text-field-outlined-append-prepend-outer-margin-top: 4px; // 18px !default;
+$text-field-append-prepend-margin: 0px; // 4px !default;
+$text-field-outlined-prepend-append-margin-top: 4px; // 8px !default;
+
+// label position for outlined Label dense and non-dense
+$text-field-outlined-label-position-x: 6px;
+$text-field-outlined-label-position-y: -14px;
+$text-field-outlined-dense-label-position-x: 2px;
+$text-field-outlined-dense-label-position-y: -10px;
+$text-field-label-top: 2px; // 6px !default;
+$text-field-label-active-transform: translateY(-14px) scale(.75); //translateY(-18px) scale(.75) !default;
+
+/** VcsTextarea **/
+$textarea-box-enclosed-single-outlined-margin-top: 0px; // 10px !default;
+$textarea-dense-box-enclosed-single-outlined-margin-top: 0px; // 6px !default;
+
+/** VcsCheckbox **/
+$icon-size: 20px; // 24px !default;
+$icon-size-dense: 16px; // 20px !default;
+
+/** VcsSelect **/
+
+$select-dense-selections-margin: 4px 4px 3px 0; // 5px 4px 3px 0 !default;
+
+// list box
+$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-item-min-height: 32px; // 48px !default;
+$list-dense-min-height: 24px; // 40px !default;
+$list-item-content-padding: 4px 0; // 12px 0 !default;
+$list-dense-content-padding: 0 0; // 8px 0 !default;
+$list-item-action-icon-margin: 0 0; //32px !default;
+$list-item-action-margin: 0 0; // 12px 0 !default;
+$list-item-icon-margin: auto 0; // 16px 0 !default;
+
+
+/** Treeview **/
+$treeview-node-level-width: 16px;
+$treeview-node-margin: 4px;
+$treeview-node-height: 32px; // 48px !default;

package/src/styles/vcsFont.scss

@@ -0,0 +1,5 @@
+// fonts
+$base-font-size: 14px; // base font-size minimum size
+
+// header
+

package/src/styles/vcsGrid.scss

@@ -0,0 +1,4 @@
+// fonts
+$line-height-base: 40px; // header lines
+$line-height-dense: 32px; // rows in form field
+

package/src/vcsUiApp.js

@@ -0,0 +1,259 @@
+import {
+  VcsApp,
+  contextIdSymbol,
+  Collection,
+  makeOverrideCollection,
+  destroyCollection,
+  OverrideClassRegistry,
+} from '@vcmap/core';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import {
+  isValidPackageName,
+  loadPlugin,
+  serializePlugin,
+  deserializePlugin,
+} from './pluginHelper.js';
+import { setupDefaultGroups, ToolboxManager } from './manager/toolbox/toolboxManager.js';
+import { WindowManager } from './manager/window/windowManager.js';
+import { NavbarManager } from './manager/navbarManager.js';
+import { createContentTreeCollection } from './contentTree/contentTreeCollection.js';
+import { contentTreeClassRegistry } from './contentTree/contentTreeItem.js';
+import OverviewMap from './navigation/overviewMap.js';
+import I18nCollection from './i18n/i18nCollection.js';
+
+/**
+ * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
+ * @property {Array<Object>} [plugins]
+ * @property {Array<ContentTreeItemOptions>} [contentTree]
+ */
+
+/**
+ * @typedef {Object} PluginConfig
+ * @property {string} name
+ * @property {string|undefined} entry
+ * @property {string|undefined} version
+ */
+
+/**
+ * @callback createPlugin
+ * @template {Object} P
+ * @param {P} config
+ * @returns {VcsPlugin<P>}
+ */
+
+/**
+ * @interface VcsPlugin
+ * @template {Object} P
+ * @property {string} version
+ * @property {string} name
+ * @property {function(VcsUiApp)} initialize - called on plugin added
+ * @property {function(VcsUiApp)} onVcsAppMounted - called on mounted of VcsApp.vue
+ * @property {function():P} [toJSON] - serialization
+ * @property {function():Promise<void>} destroy
+ * @api
+ */
+
+/**
+ * @interface VcsComponentManager
+ * @template {Object} T - the component type
+ * @template {Object} O - component options
+ * @property {VcsEvent<T>} added
+ * @property {VcsEvent<T>} removed
+ * @property {string[]} componentIds - all registered component ids as reactive array
+ * @property {function(string):T} get - get component by id
+ * @property {function(string):boolean} has - has component with id
+ * @property {function(string)} remove - remove component by id
+ * @property {function(O, string|vcsAppSymbol):T} add - add component of owner
+ * @property {function(string|vcsAppSymbol)} removeOwner - remove all components of owner
+ * @property {function()} clear - remove all registered components
+ * @property {function()} destroy
+ * @api
+ */
+
+/**
+ * @returns {Logger}
+ */
+function getLogger() {
+  return getLoggerByName('VcsUiApp');
+}
+
+/**
+ * @class
+ */
+class VcsUiApp extends VcsApp {
+  constructor() {
+    super();
+    /**
+     * @type {OverrideCollection<VcsPlugin>}
+     * @private
+     */
+    this._plugins = makeOverrideCollection(
+      new Collection(),
+      () => this.dynamicContextId,
+      serializePlugin,
+      deserializePlugin,
+    );
+    this._pluginAddedListener = this._plugins.added.addEventListener((plugin) => {
+      if (plugin.initialize) {
+        plugin.initialize(this);
+      }
+    });
+
+    /**
+     * @type {OverrideClassRegistry<ContentTreeItem>}
+     * @private
+     */
+    this._contentTreeClassRegistry = new OverrideClassRegistry(contentTreeClassRegistry);
+
+    /**
+     * @type {OverrideContentTreeCollection}
+     * @private
+     */
+    this._contentTree = createContentTreeCollection(this);
+
+    /**
+     * @type {ToolboxManager}
+     * @private
+     */
+    this._toolboxManager = new ToolboxManager();
+    setupDefaultGroups(this._toolboxManager);
+
+    /**
+     * @type {WindowManager}
+     * @private
+     */
+    this._windowManager = new WindowManager();
+    /**
+     * @type {ButtonManager}
+     * @private
+     */
+    this._navbarManager = new NavbarManager();
+
+    /**
+     * @type {OverviewMap}
+     * @private
+     */
+    this._overviewMap = new OverviewMap(this);
+
+    /**
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    this._i18n = new I18nCollection(() => this.dynamicContextId);
+  }
+
+  /**
+   * @type {OverrideCollection<VcsPlugin>}
+   * @readonly
+   */
+  get plugins() { return this._plugins; }
+
+  /**
+   * @type {OverrideCollection<ContentTreeItem>}
+   * @readonly
+   */
+  get contentTree() { return this._contentTree; }
+
+  /**
+   * @type {OverrideClassRegistry<ContentTreeItem>}
+   * @readonly
+   */
+  get contentTreeClassRegistry() { return this._contentTreeClassRegistry; }
+
+  /**
+   * @returns {ToolboxManager}
+   * @readonly
+   */
+  get toolboxManager() { return this._toolboxManager; }
+
+  /**
+   * @returns {WindowManager}
+   * @readonly
+   */
+  get windowManager() { return this._windowManager; }
+
+  /**
+   * @returns {ButtonManager}
+   * @readonly
+   */
+  get navbarManager() { return this._navbarManager; }
+
+  /**
+   * @type {OverviewMap}
+   * @readonly
+   */
+  get overviewMap() { return this._overviewMap; }
+
+  /**
+   * @type {I18nCollection}
+   * @readonly
+   */
+  get i18n() { return this._i18n; }
+
+  /**
+   * @param {import("@vcmap/core").Context} context
+   * @returns {Promise<void>}
+   * @protected
+   */
+  async _parseContext(context) {
+    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);
+        if (!plugin) {
+          return null;
+        }
+        if (!isValidPackageName(plugin.name)) {
+          getLogger().warning(`plugin ${plugin.name} has no valid package name!`);
+        }
+        plugin[contextIdSymbol] = context.id;
+        return plugin;
+      }));
+
+      plugins
+        .filter(p => p)
+        .map(p => this._plugins.override(p))
+        .filter(p => p.i18n)
+        .forEach((p) => {
+          this.i18n.addPluginMessages(p.name, context.id, p.i18n);
+        });
+    }
+    if (Array.isArray(config.i18n)) {
+      await this.i18n.parseItems(config.i18n, context.id);
+    }
+    await super._parseContext(context);
+    await this._contentTree.parseItems(config.contentTree, context.id);
+  }
+
+  /**
+   * @param {string} contextId
+   * @returns {Promise<void>}
+   * @protected
+   */
+  async _removeContext(contextId) {
+    await Promise.all([
+      super._removeContext(contextId),
+      this._plugins.removeContext(contextId),
+      this._i18n.removeContext(contextId),
+      this._contentTree.removeContext(contextId),
+    ]);
+  }
+
+  /**
+   * Destroys the vcsUiApp and all its collections, their content and ui managers.
+   */
+  destroy() {
+    this.windowManager.destroy();
+    this.navbarManager.destroy();
+    this._overviewMap.destroy();
+    // TODO destroy other manager
+    this._pluginAddedListener();
+    destroyCollection(this._plugins);
+    destroyCollection(this._contentTree);
+    destroyCollection(this._i18n);
+    this._contentTreeClassRegistry.destroy();
+    super.destroy();
+  }
+}
+
+export default VcsUiApp;

package/src/vuePlugins/i18n.js

@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import { i18nPluginSymbol } from '../i18n/i18nCollection.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import de from '../i18n/de.js';
+import en from '../i18n/en.js';
+
+
+Vue.use(VueI18n);
+
+/**
+ * creates a new VueI18n Instance.
+ * @returns {VueI18n}
+ */
+export function createVueI18n() {
+  const i18n = new VueI18n({
+    locale: 'en',
+    silentFallbackWarn: true,
+    silentTranslationWarn: true,
+    fallbackLocale: ['en', 'de'],
+    messages: {
+      en: {},
+    },
+  });
+  return i18n;
+}
+
+/**
+ * sets the messages to the given I18n Instance;
+ * @param {Object} messages
+ * @param {VueI18n} i18n
+ */
+function setI18n(messages, i18n) {
+  i18n.availableLocales.forEach((locale) => {
+    i18n.setLocaleMessage(locale, undefined);
+  });
+  Object.entries(messages).forEach(([locale, localeMessages]) => {
+    i18n.setLocaleMessage(locale, localeMessages);
+  });
+}
+
+/**
+ * @param {VcsUiApp} app
+ * @param {VueI18n} i18n
+ * @returns {function():void} returns a destroy function
+ */
+export function setupI18n(app, i18n) {
+  const defaultMessages = { en, de };
+  defaultMessages[i18nPluginSymbol] = vcsAppSymbol;
+  app.i18n.add(defaultMessages);
+
+  setI18n(app.i18n.getMergedMessages(), i18n);
+  i18n.locale = app.locale;
+  const destroyFunctions = [
+    app.i18n.added.addEventListener(() => {
+      setI18n(app.i18n.getMergedMessages(), i18n);
+    }),
+    app.i18n.removed.addEventListener(() => {
+      setI18n(app.i18n.getMergedMessages(), i18n);
+    }),
+    app.localeChanged.addEventListener((locale) => {
+      i18n.locale = locale;
+    }),
+  ];
+  return function tearDownI18nSetup() {
+    destroyFunctions.forEach((destroy) => { destroy(); });
+  };
+}
+

package/src/vuePlugins/vuetify.js

@@ -0,0 +1,54 @@
+import '@mdi/font/css/materialdesignicons.css';
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import Icons from '../icons/+all.js';
+
+Vue.use(Vuetify);
+
+export function createVuetify() {
+  const vuetify = new Vuetify({
+    treeShake: false,
+    defaultAssets: {
+      font: {
+        family: 'titillium-web',
+      },
+    },
+    theme: {
+      options: {
+        customProperties: true,
+      },
+      themes: {
+        light: {
+          basic: '#FFFFFF',
+          primary: '#409D76',
+          accent: '#EDEDED',
+          warning: '#FFCE00',
+          'gray-200': '#DEDEDE',
+          gray: '#707070',
+          // todo: change remaining colors
+          secondary: '#222222',
+          error: '#AA0000',
+          info: '#2196F3',
+          success: '#4CAF50',
+        },
+        dark: {
+          basic: '#000000',
+          primary: '#409D76',
+          secondary: '#FFFFFF',
+          accent: '#757575',
+          warning: '#FFCE00',
+          error: '#FF5252',
+        },
+      },
+    },
+    icons: {
+      iconfont: 'mdi',
+      values: {
+        ...Icons,
+      },
+    },
+  });
+  return vuetify;
+}
+
+export const vuetify = createVuetify();

package/start.js

@@ -0,0 +1,3 @@
+import { initApp } from '@vcmap/ui';
+
+initApp('#app', 'map.config.json');