@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.4

package/src/actions/actionHelper.js

@@ -8,12 +8,12 @@ import {
   Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
-import { reactive, ref } from 'vue';
+import { nextTick, reactive, ref } from 'vue';
 import { parseBoolean } from '@vcsuite/parsers';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import {
-  getFittedWindowPositionOptionsFromMapEvent,
+  getFittedWindowPositionOptions,
   getTargetSize,
 } from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/SearchComponent.vue';
@@ -142,6 +142,8 @@ export function createToggleAction(
   return { action, destroy };
 }
 
+export const searchComponentId = 'searchId';
+
 /**
  * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
  * @param {import("../vcsUiApp.js").default} app
@@ -153,8 +155,8 @@ export function createSearchButtonAction(app) {
   const uiConfig = app.uiConfig.config;
 
   const determineAction = () => {
-    if (app.windowManager.has('searchId')) {
-      app.windowManager.remove('searchId');
+    if (app.windowManager.has(searchComponentId)) {
+      app.windowManager.remove(searchComponentId);
     }
     if (
       !uiConfig.hideSearch &&
@@ -168,7 +170,7 @@ export function createSearchButtonAction(app) {
           title: 'search.tooltip',
         },
         {
-          id: 'searchId',
+          id: searchComponentId,
           component: SearchComponent,
           state: { hideHeader: true },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -272,6 +274,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
   const id = uuid();
   const { position: windowPositionOptions, ...component } = modalComponent;
   let modalActivator = null;
+  let clickedWindowPosition = null;
 
   /**
    * Closes the modal at mousedown on an app element
@@ -285,28 +288,58 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }
   };
 
+  const getPositionOptions = (contentHeight = 0) => {
+    const { width, height } = modalActivator.getBoundingClientRect();
+    const fittedPosition = getFittedWindowPositionOptions(
+      clickedWindowPosition.x,
+      clickedWindowPosition.y,
+      windowPositionOptions?.width || 320,
+      windowPositionOptions?.height || contentHeight,
+      app.maps.target,
+      width,
+      height,
+    );
+    const position = {
+      ...fittedPosition,
+      ...windowPositionOptions,
+    };
+    const targetSize = getTargetSize(app.maps.target);
+    if (contentHeight) {
+      if (position.bottom) {
+        position.maxHeight = Math.min(
+          position.maxHeight ?? Infinity,
+          clickedWindowPosition.y - targetSize.top,
+        );
+      } else {
+        position.maxHeight = Math.min(
+          position.maxHeight ?? Infinity,
+          targetSize.height - (clickedWindowPosition.y - targetSize.top),
+        );
+      }
+    }
+    position.maxWidth = 320;
+    position.width = windowPositionOptions?.width || -1; // unset width magic. dont touch.
+    return position;
+  };
+
   const action = reactive({
     ...actionOptions,
     active: false,
     callback(event) {
       if (!this.active) {
         this.active = true;
-        const { left, top, width } =
-          event.currentTarget.getBoundingClientRect();
         modalActivator = event.currentTarget;
-        const position = {
-          ...getFittedWindowPositionOptionsFromMapEvent(
-            { x: left + width, y: top - getTargetSize(app.maps.target).top },
-            windowPositionOptions?.width || 320,
-            windowPositionOptions?.height || 0,
-            app.maps.target,
-          ),
-          ...windowPositionOptions,
-        };
-        position.maxWidth = 320;
-        position.width = windowPositionOptions?.width || -1; // unset width magic. dont touch.
+        clickedWindowPosition = { x: event.x, y: event.y };
         const state = { ...modalComponent?.state, hideHeader: true };
-        app.windowManager.add({ position, ...component, id, state }, owner);
+        app.windowManager.add(
+          {
+            position: getPositionOptions(),
+            ...component,
+            id,
+            state,
+          },
+          owner,
+        );
         document.addEventListener('mousedown', handleMouseDown);
       } else {
         this.active = false;
@@ -325,6 +358,24 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }),
   ];
 
+  // if no height is provided, update fitted window position after actual div size is available
+  if (!windowPositionOptions?.height) {
+    listeners.push(
+      app.windowManager.added.addEventListener(async (added) => {
+        if (added.id === id) {
+          await nextTick();
+          const div = document.getElementById(`window-component--${id}`);
+          if (div) {
+            app.windowManager.setWindowPositionOptions(
+              id,
+              getPositionOptions(div.offsetHeight),
+            );
+          }
+        }
+      }),
+    );
+  }
+
   const destroy = () => {
     listeners.forEach((cb) => {
       cb();

package/src/application/VcsApp.vue

@@ -3,7 +3,7 @@
     <VcsSplashScreen
       v-if="splashScreen"
       :options="splashScreen"
-      v-model="splashScreenRef"
+      v-model="showSplashScreen"
     ></VcsSplashScreen>
     <VcsNavbar v-if="!config.hideHeader" />
     <VcsContainer :attribution-action="attributionAction" />
@@ -42,7 +42,14 @@
 </style>
 
 <script>
-  import { computed, onMounted, onUnmounted, provide, watch, ref } from 'vue';
+  import {
+    computed,
+    onMounted,
+    onUnmounted,
+    provide,
+    watch,
+    shallowRef,
+  } from 'vue';
   import { useDisplay } from 'vuetify';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
   import { VContainer, VFooter, VSpacer } from 'vuetify/components';
@@ -69,12 +76,14 @@
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsObliqueFooter from './VcsObliqueFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
-  import VcsSplashScreen from './VcsSplashScreen.vue';
+  import VcsSplashScreen, { getSplashScreenHash } from './VcsSplashScreen.vue';
   import VcsTextPage from './VcsTextPage.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
+  import { getFromLocalStorage, hideSplashScreenKey } from '../localStorage.js';
+  import { name as packageName } from '../../package.json';
 
   /**
    * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
@@ -202,6 +211,8 @@
     };
   }
 
+  export const legendComponentId = 'legendId';
+
   /**
    * This helper function will add a legend action button to the apps NavbarManager TOOL location, if legend entries are available.
    * Watches number of legend entries.
@@ -218,7 +229,7 @@
         title: 'legend.tooltip',
       },
       {
-        id: 'legend',
+        id: legendComponentId,
         component: VcsLegend,
         state: {
           headerTitle: 'legend.title',
@@ -238,10 +249,10 @@
      * Adds a legend button, if not existing
      */
     const addLegend = () => {
-      if (!app.navbarManager.has('legend')) {
+      if (!app.navbarManager.has(legendComponentId)) {
         app.navbarManager.add(
           {
-            id: 'legend',
+            id: legendComponentId,
             action: legendAction,
           },
           vcsAppSymbol,
@@ -255,11 +266,11 @@
       if (
         app.uiConfig.config.openLegendOnAdd &&
         newValue.length > currentEntryLength &&
-        !app.windowManager.has('legend')
+        !app.windowManager.has(legendComponentId)
       ) {
         app.windowManager.add(
           {
-            id: 'legend',
+            id: legendComponentId,
             component: VcsLegend,
             state: {
               headerTitle: 'legend.title',
@@ -289,8 +300,8 @@
         (style) => style?.properties?.legend,
       );
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
-        app.navbarManager.remove('legend');
-        app.windowManager.remove('legend');
+        app.navbarManager.remove(legendComponentId);
+        app.windowManager.remove(legendComponentId);
       } else {
         addLegend();
       }
@@ -314,14 +325,16 @@
 
     return () => {
       watchEntries();
-      app.navbarManager.remove('legend');
-      app.windowManager.remove('legend');
+      app.navbarManager.remove(legendComponentId);
+      app.windowManager.remove(legendComponentId);
       destroy();
       legendDestroy();
       listeners.forEach((cb) => cb());
     };
   }
 
+  export const customScreenComponentId = 'customScreenId';
+
   /**
    * This helper function will add a customScreen action button to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
@@ -338,7 +351,7 @@
             title: customScreen.title,
           },
           {
-            id: 'customScreenId',
+            id: customScreenComponentId,
             component: VcsTextPage,
             state: {
               headerIcon: customScreen.icon,
@@ -355,7 +368,7 @@
         );
       app.navbarManager.add(
         {
-          id: 'customScreenToggle',
+          id: customScreenComponentId,
           action: customScreenAction,
         },
         vcsAppSymbol,
@@ -369,8 +382,8 @@
     const stopCustomScreenWatcher = watch(
       () => app.uiConfig.config.customScreen,
       (newCustomScreen) => {
-        if (app.navbarManager.has('customScreenToggle')) {
-          app.navbarManager.remove('customScreenToggle');
+        if (app.navbarManager.has(customScreenComponentId)) {
+          app.navbarManager.remove(customScreenComponentId);
         }
         if (newCustomScreen) {
           customScreen = setupCustomScreenAction();
@@ -385,17 +398,19 @@
       stopCustomScreenWatcher();
     };
   }
+
+  export const splashScreenComponentId = 'splashScreenToggle';
   /**
    * This helper function will add a Splash Screen action button to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
-   * @param {import("vue").Ref} splashScreenRef
    * @returns {WatchStopHandle}
    */
-  function setupSplashScreen(app, splashScreenRef) {
+  function setupSplashScreen(app) {
     function setupSplashScreenAction(moduleId) {
-      const { splashScreen } = app.uiConfig.config;
+      const { config, showSplashScreen } = app.uiConfig;
+      const { splashScreen } = config;
       if (splashScreen && moduleId !== app.dynamicModuleId) {
-        splashScreenRef.value = true;
+        showSplashScreen.value = true;
       }
       if (splashScreen && splashScreen.menuEntry) {
         const splashScreenAction = {
@@ -403,12 +418,12 @@
           icon: splashScreen.icon || 'mdi-alert-box',
           title: splashScreen.title,
           callback() {
-            splashScreenRef.value = !splashScreenRef.value;
+            showSplashScreen.value = !showSplashScreen.value;
           },
         };
         app.navbarManager.add(
           {
-            id: 'splashScreenToggle',
+            id: splashScreenComponentId,
             action: splashScreenAction,
           },
           vcsAppSymbol,
@@ -419,8 +434,8 @@
     setupSplashScreenAction();
     const removeAddedListener = app.uiConfig.added.addEventListener((item) => {
       if (item.name === 'splashScreen') {
-        if (app.navbarManager.has('splashScreenToggle')) {
-          app.navbarManager.remove('splashScreenToggle');
+        if (app.navbarManager.has(splashScreenComponentId)) {
+          app.navbarManager.remove(splashScreenComponentId);
         }
         setupSplashScreenAction(item[moduleIdSymbol]);
       }
@@ -428,8 +443,8 @@
     const removeRemovedListener = app.uiConfig.removed.addEventListener(
       (item) => {
         if (item.name === 'splashScreen') {
-          if (app.navbarManager.has('splashScreenToggle')) {
-            app.navbarManager.remove('splashScreenToggle');
+          if (app.navbarManager.has(splashScreenComponentId)) {
+            app.navbarManager.remove(splashScreenComponentId);
           }
         }
       },
@@ -439,13 +454,14 @@
       removeRemovedListener();
     };
   }
+
+  export const settingsComponentId = 'vcsSettings';
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
-    const settingsWindowId = 'vcsSettings';
     const { action: settingsAction, destroy: settingsDestroy } =
       createToggleAction(
         {
@@ -454,7 +470,7 @@
           title: 'settings.tooltip',
         },
         {
-          id: settingsWindowId,
+          id: settingsComponentId,
           component: VcsSettings,
           state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -464,19 +480,20 @@
       );
     app.navbarManager.add(
       {
-        id: settingsWindowId,
+        id: settingsComponentId,
         action: settingsAction,
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
     );
     return () => {
-      app.navbarManager.remove(settingsWindowId);
-      app.windowManager.remove(settingsWindowId);
+      app.navbarManager.remove(settingsComponentId);
+      app.windowManager.remove(settingsComponentId);
       settingsDestroy();
     };
   }
 
+  export const helpComponentId = 'helpButton';
   /**
    * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
@@ -492,7 +509,7 @@
     );
     app.navbarManager.add(
       {
-        id: 'helpButton',
+        id: helpComponentId,
         action: helpAction,
       },
       vcsAppSymbol,
@@ -674,6 +691,8 @@
     };
   }
 
+  export const attributionsComponentId = 'attributionId';
+
   /**
    * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
    * It also returns a attributionAction to toggle the attributions window and a destroy function.
@@ -691,7 +710,7 @@
           title: 'footer.attributions.tooltip',
         },
         {
-          id: 'attribution',
+          id: attributionsComponentId,
           component: VcsAttributions,
           state: {
             headerTitle: 'footer.attributions.title',
@@ -758,8 +777,8 @@
         'hideSettings',
       );
       const stopCustomScreen = setupCustomScreen(app);
-      const splashScreenRef = ref(false);
-      const stopSplashScreen = setupSplashScreen(app, splashScreenRef);
+      const { showSplashScreen } = app.uiConfig;
+      const stopSplashScreen = setupSplashScreen(app);
       setupHelpButton(app);
       const destroyMyWorkspace = setupUIConfigDependency(
         app,
@@ -776,6 +795,33 @@
         pluginMountedListener = setupPluginMountedListeners(app);
       });
 
+      function getSplashScreenConfig() {
+        if (app.uiConfig.config.splashScreen) {
+          const config = app.uiConfig.getByKey('splashScreen');
+          const hash = getSplashScreenHash(app);
+          const moduleId = config[moduleIdSymbol];
+          const storedHash = getFromLocalStorage(
+            `${packageName}_${moduleId}`,
+            hideSplashScreenKey,
+          );
+          if (hash !== storedHash) {
+            return {
+              title: 'components.splashScreen.name',
+              tooltip: 'components.splashScreen.tooltip',
+              position: { width: '800px', height: '400px' },
+              ...app.uiConfig.config.splashScreen,
+            };
+          }
+        }
+        return undefined;
+      }
+      const splashScreen = shallowRef(getSplashScreenConfig());
+      app.uiConfig.added.addEventListener(({ name }) => {
+        if (name === 'splashScreen') {
+          splashScreen.value = getSplashScreenConfig();
+        }
+      });
+
       onUnmounted(() => {
         if (pluginMountedListener) {
           pluginMountedListener();
@@ -829,21 +875,8 @@
           }
           return undefined;
         }),
-        splashScreenRef,
-        splashScreen: computed(() => {
-          if (app.uiConfig.config.splashScreen) {
-            return {
-              title: 'components.splashScreen.name',
-              tooltip: 'components.splashScreen.tooltip',
-              position: {
-                width: '800px',
-                height: '400px',
-              },
-              ...app.uiConfig.config.splashScreen,
-            };
-          }
-          return undefined;
-        }),
+        showSplashScreen,
+        splashScreen,
         attributionEntries,
         attributionAction,
       };

package/src/application/VcsApp.vue.d.ts

@@ -74,10 +74,16 @@ export function setupAttributions(app: import("../vcsUiApp.js").default): {
     attributionAction: import("../actions/actionHelper.js").VcsAction;
     destroyAttributions: () => void;
 };
+export const legendComponentId: "legendId";
+export const customScreenComponentId: "customScreenId";
+export const splashScreenComponentId: "splashScreenToggle";
+export const settingsComponentId: "vcsSettings";
+export const helpComponentId: "helpButton";
 /**
  * @type {string}
  */
 export const categoryManagerWindowId: string;
+export const attributionsComponentId: "attributionId";
 declare const _default: import("vue").DefineComponent<{
     appId: {
         type: StringConstructor;
@@ -183,6 +189,14 @@ declare const _default: import("vue").DefineComponent<{
             }[] | undefined;
             readonly menuEntry?: boolean | undefined;
             readonly acceptInput?: boolean | undefined;
+            /**
+             * Whether the Secondary Button is disabled as well as long as the checkbox is not checked.
+             */
+            readonly requireInputForSecondary?: boolean | undefined;
+            /**
+             * Whether to display a checkbox allowing the user not to see the SplashScreen again. This parameter is relative to moduleId and configuration; the SplashScreen will be shown again in case of any change.
+             */
+            readonly enableDontShowAgain?: boolean | undefined;
             readonly position?: {
                 readonly width?: string | undefined;
                 readonly height?: string | undefined;
@@ -408,8 +422,8 @@ declare const _default: import("vue").DefineComponent<{
         content?: string | undefined;
         tooltip: string;
     } | undefined>;
-    splashScreenRef: import("vue").Ref<boolean>;
-    splashScreen: import("vue").ComputedRef<{
+    showSplashScreen: import("vue").Ref<boolean>;
+    splashScreen: import("vue").ShallowRef<{
         title: string;
         icon?: string | undefined;
         content?: string | undefined;
@@ -425,6 +439,14 @@ declare const _default: import("vue").DefineComponent<{
         }[] | undefined;
         menuEntry?: boolean | undefined;
         acceptInput?: boolean | undefined;
+        /**
+         * Whether the Secondary Button is disabled as well as long as the checkbox is not checked.
+         */
+        requireInputForSecondary?: boolean | undefined;
+        /**
+         * Whether to display a checkbox allowing the user not to see the SplashScreen again. This parameter is relative to moduleId and configuration; the SplashScreen will be shown again in case of any change.
+         */
+        enableDontShowAgain?: boolean | undefined;
         position: {
             readonly width?: string | undefined;
             readonly height?: string | undefined;

package/src/application/VcsContainer.vue.d.ts

@@ -103,6 +103,14 @@ declare const _default: import("vue").DefineComponent<{
             }[] | undefined;
             readonly menuEntry?: boolean | undefined;
             readonly acceptInput?: boolean | undefined;
+            /**
+             * Whether the Secondary Button is disabled as well as long as the checkbox is not checked.
+             */
+            readonly requireInputForSecondary?: boolean | undefined;
+            /**
+             * Whether to display a checkbox allowing the user not to see the SplashScreen again. This parameter is relative to moduleId and configuration; the SplashScreen will be shown again in case of any change.
+             */
+            readonly enableDontShowAgain?: boolean | undefined;
             readonly position?: {
                 readonly width?: string | undefined;
                 readonly height?: string | undefined;

package/src/application/VcsObliqueFooter.vue

@@ -17,8 +17,12 @@
 
 <script>
   import { computed, inject, onUnmounted, shallowRef } from 'vue';
-  import { ObliqueMap, ObliqueViewDirection } from '@vcmap/core';
-  import { renderTemplate } from '../components/form-output/markdownHelper.js';
+  import {
+    ObliqueMap,
+    ObliqueViewDirection,
+    renderTemplate,
+  } from '@vcmap/core';
+  import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 
   const i18nViewDirection = {
     [ObliqueViewDirection.NORTH]: 'footer.oblique.north',
@@ -95,7 +99,9 @@
             app.uiConfig.config.obliqueFooterTemplate ??
             'footer.oblique.template';
           return renderTemplate(
-            app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            parseAndSanitizeMarkdown(
+              app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            ),
             getTranslatedImageInfo(currentImage.value),
           );
         }

package/src/application/VcsSplashScreen.vue

@@ -25,6 +25,13 @@
             />
           </template>
         </VcsCheckbox>
+        <VcsCheckbox v-if="options.enableDontShowAgain" v-model="dontShowAgain">
+          <template #label>
+            <div class="pl-2">
+              {{ $t('components.splashScreen.dontShowAgain') }}
+            </div>
+          </template>
+        </VcsCheckbox>
       </v-card-text>
 
       <v-card-actions>
@@ -33,6 +40,11 @@
             v-if="
               options.secondaryButtonTitle && options.secondaryCallbackOptions
             "
+            :disabled="
+              option.requireInputForSecondary &&
+              options.acceptInput &&
+              !checkBox
+            "
             @click="secondaryButtonClicked"
           >
             {{ $st(options.secondaryButtonTitle) }}
@@ -55,11 +67,27 @@
 <script>
   import { VDialog, VCard, VCardText, VCardActions } from 'vuetify/components';
   import { computed, ref, inject } from 'vue';
+  import { moduleIdSymbol } from '@vcmap/core';
+  import { v5 as uuidv5 } from 'uuid';
+  import { hideSplashScreenKey, setToLocalStorage } from '../localStorage.js';
   import { executeCallbacks } from '../callback/vcsCallback.js';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
   import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
+  import { name } from '../../package.json';
+
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   * @returns {Promise<string>} The hash of the SplashScreen config.
+   */
+  export function getSplashScreenHash(app) {
+    const config = app.uiConfig.getByKey('splashScreen');
+    const string = JSON.stringify(
+      Object.entries(config.value).sort((a, b) => a[0].localeCompare(b[0])),
+    );
+    return uuidv5(string, uuidv5.URL);
+  }
 
   export default {
     name: 'VcsSplashScreen',
@@ -87,9 +115,17 @@
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
       const checkBox = ref(false);
+      const dontShowAgain = ref(false);
+
       function exitScreen() {
         localValue.value = false;
         checkBox.value = false;
+        if (dontShowAgain.value) {
+          const config = app.uiConfig.getByKey('splashScreen');
+          const hash = getSplashScreenHash(app);
+          const moduleId = config[moduleIdSymbol];
+          setToLocalStorage(`${name}_${moduleId}`, hideSplashScreenKey, hash);
+        }
         if (Array.isArray(props.options.exitCallbackOptions)) {
           executeCallbacks(app, props.options.exitCallbackOptions);
         }
@@ -113,6 +149,7 @@
         exitScreen,
         secondaryButtonClicked,
         checkBox,
+        dontShowAgain,
         position,
       };
     },

package/src/application/VcsSplashScreen.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @param {import("@vcmap/ui").VcsUiApp} app
+ * @returns {Promise<string>} The hash of the SplashScreen config.
+ */
+export function getSplashScreenHash(app: import("@vcmap/ui").VcsUiApp): Promise<string>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -12,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     exitScreen: () => void;
     secondaryButtonClicked: () => void;
     checkBox: import("vue").Ref<boolean>;
+    dontShowAgain: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;
         height: any;