make export fixture dynamically load

src/fixtures/export/api/export.ts

@@ -1,11 +1,7 @@
 import { FixtureInstance } from '@/api/internal';
 import { useExportStore } from '../store';
 import type { ExportConfig } from '../store';
-
-import { fabric } from 'fabric';
-// prevents blurriness <https://stackoverflow.com/questions/47513180/fabricjs-lines-in-group-become-blurry>
-fabric.Object.prototype.objectCaching = false;
-
+import type { fabric } from 'fabric';
 import FileSaver from 'file-saver';
 
 const DEFAULT_WIDTH = 1200;
@@ -130,6 +126,9 @@ export class ExportAPI extends FixtureInstance {
      * @memberof ExportAPI
      */
     async make(canvas: HTMLCanvasElement, panelWidth: number): Promise<void> {
+        const { fabric } = await import('fabric');
+        // prevents blurriness <https://stackoverflow.com/questions/47513180/fabricjs-lines-in-group-become-blurry>
+        fabric.Object.prototype.objectCaching = false;
         const exportStore = useExportStore(this.$vApp.$pinia);
 
         // stores the individual fabric objects for use with a custom render function

src/fixtures/export/index.ts

@@ -11,19 +11,32 @@ import type ExportTimestampFixture from '../export-timestamp';
 import type ExportTitleFixture from '../export-title';
 import type ExportNorthArrowFixture from '../export-northarrow';
 import type ExportScalebarFixture from '../export-scalebar';
+import type { PanelInstance } from '@/api';
 import { useAppbarStore } from '../appbar/store';
 import { useExportStore } from './store';
 
 class ExportFixture extends ExportAPI {
     initialized(): void {
         // load sub-fixtures required by the export
-        this.$iApi.fixture.add('export-title');
-        this.$iApi.fixture.add('export-map');
-        this.$iApi.fixture.add('export-legend');
-        this.$iApi.fixture.add('export-northarrow');
-        this.$iApi.fixture.add('export-scalebar');
-        this.$iApi.fixture.add('export-timestamp');
-        this.$iApi.fixture.add('export-footnote');
+    }
+
+    async needed() {
+        const exportTitle = (await import('../export-title')).default;
+        const exportMap = (await import('../export-map')).default;
+        const exportLegend = (await import('../export-legend')).default;
+        const exportNorthArrow = (await import('../export-northarrow')).default;
+        const exportScalebar = (await import('../export-scalebar')).default;
+        const exportTimestamp = (await import('../export-timestamp')).default;
+        const exportFootnote = (await import('../export-footnote')).default;
+
+        // any type is needed to suppress TS errors, not able to find a better solution/type for use
+        this.$iApi.fixture.add('export-title', exportTitle as any);
+        this.$iApi.fixture.add('export-map', exportMap as any);
+        this.$iApi.fixture.add('export-legend', exportLegend as any);
+        this.$iApi.fixture.add('export-northarrow', exportNorthArrow as any);
+        this.$iApi.fixture.add('export-scalebar', exportScalebar as any);
+        this.$iApi.fixture.add('export-timestamp', exportTimestamp as any);
+        this.$iApi.fixture.add('export-footnote', exportFootnote as any);
     }
 
     added(): void {
@@ -51,6 +64,17 @@ class ExportFixture extends ExportAPI {
             { i18n: { messages } }
         );
 
+        const neededHandler = this.$iApi.event.on(
+            'panel/opened',
+            async (panel: PanelInstance) => {
+                if (panel.id === 'export') {
+                    await this.needed();
+                    (panel as any).exportMake();
+                    this.$iApi.event.off(neededHandler);
+                }
+            }
+        );
+
         // parse export section of config and store in the config store
         this._parseConfig(this.config);
         const unwatch = this.$vApp.$watch(

src/fixtures/export/screen.vue

@@ -59,7 +59,7 @@ import ExportSettings from './settings-button.vue';
 import { useExportStore } from './store';
 import { useI18n } from 'vue-i18n';
 
-defineProps({
+const props = defineProps({
     panel: {
         type: Object as PropType<PanelInstance>,
         required: true
@@ -122,6 +122,7 @@ const make = debounce(300, () => {
 });
 
 onBeforeMount(() => {
+    (props.panel as any).exportMake = make;
     // Set up watchers
     watchers.value.push(
         // Listen for any changes to the settings, and refresh the image when they do change