make export fixture dynamically load

milespetrov · Sep 20, 2024 · dda2621 · dda2621
1 parent b1f79f6
commit dda2621
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/fixtures/export/api/export.ts b/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

diff --git a/src/fixtures/export/index.ts b/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,16 @@ class ExportFixture extends ExportAPI {
             { i18n: { messages } }
         );
 
+        const neededHandler = this.$iApi.event.on(
+            'panel/opened',
+            (panel: PanelInstance) => {
+                if (panel.id === 'export') {
+                    this.needed();
+                    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(