@combeenation/3d-viewer 0.0.1-types

package/src/api/util/globalTypes.ts

@@ -0,0 +1,503 @@
+// global accessible types imported from 3d-viewer
+type Viewer = import('../classes/viewer').Viewer;
+type Variant = import('../classes/variant').Variant;
+type VariantInstance = import('../classes/variantInstance').VariantInstance;
+type VariantParameterizable = import('../classes/variantParameterizable').VariantParameterizable;
+/**
+ * Alias for {@link Element} which can be used to prevent name clashes with the web APIs
+ * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
+ */
+type VariantElement = import('../classes/element').Element;
+type DottedPath = import('../classes/dottedPath').DottedPath;
+type ViewerLight = import('../classes/viewerLight').ViewerLight;
+type SceneManager = import('../manager/sceneManager').SceneManager;
+
+type FuzzyMap<K, V> = import('../classes/fuzzyMap').FuzzyMap<K, V>;
+
+// global accessible types imported from BabylonJS
+type Scene = import('@babylonjs/core/scene').Scene;
+type Vector3 = import('@babylonjs/core/Maths/math.vector').Vector3;
+type Color3 = import('@babylonjs/core/Maths/math.color').Color3;
+type Color4 = import('@babylonjs/core/Maths/math.color').Color4;
+type Material = import('@babylonjs/core/Materials/material').Material;
+type PBRMaterial = import('@babylonjs/core/Materials/PBR/pbrMaterial').PBRMaterial;
+type StandardMaterial = import('@babylonjs/core/Materials/standardMaterial').StandardMaterial;
+type DynamicTexture = import('@babylonjs/core/Materials/Textures/dynamicTexture').DynamicTexture;
+type Mesh = import('@babylonjs/core/Meshes/mesh').Mesh;
+type AbstractMesh = import('@babylonjs/core/Meshes/abstractMesh').AbstractMesh;
+type InstancedMesh = import('@babylonjs/core/Meshes/instancedMesh').InstancedMesh;
+type TransformNode = import('@babylonjs/core/Meshes/transformNode').TransformNode;
+type Engine = import('@babylonjs/core/Engines/engine').Engine;
+type EngineOptions = import('@babylonjs/core/Engines/thinEngine').EngineOptions;
+type ArcRotateCamera = import('@babylonjs/core/Cameras/arcRotateCamera').ArcRotateCamera;
+type IScreenshotSize = import('@babylonjs/core/Misc/interfaces/screenshotSize').IScreenshotSize;
+type BabylonAnimation = import('@babylonjs/core/Animations/animation').Animation;
+type CubeTexture = import('@babylonjs/core/Materials/Textures/cubeTexture').CubeTexture;
+type MeshBuilder = typeof import('@babylonjs/core/Meshes/meshBuilder').MeshBuilder;
+type Texture = import('@babylonjs/core/Materials/Textures/texture').Texture;
+type HemisphericLight = import('@babylonjs/core/Lights/hemisphericLight').HemisphericLight;
+type DirectionalLight = import('@babylonjs/core/Lights/directionalLight').DirectionalLight;
+type IInspectorOptions = import('@babylonjs/core/Debug').IInspectorOptions;
+// Node is already defined in lib.dom.d.ts, so it can't be declared that way
+// type Node = import("@babylonjs/core/node").Node;
+
+type IExportOptions = import('@babylonjs/serializers/glTF/2.0').IExportOptions;
+
+type EventEmitter = import('eventemitter3');
+
+type Undefinable<T> = T | undefined;
+
+type Nullable<T> = T | null;
+
+// some more global accessible types
+type PathDefinitions = {
+  include: string[];
+  exclude?: string[];
+};
+
+type TraceableDefinition = {
+  path: string;
+};
+
+type TraceableDefinitions = {
+  [name: string]: TraceableDefinition;
+};
+
+type PaintableDefinition = {
+  path: string;
+  textureOptions:
+    | {
+        width: number;
+        height: number;
+      }
+    | number;
+};
+
+type PaintableDefinitions = {
+  [name: string]: PaintableDefinition;
+};
+
+type Asset = {
+  rootUrl: string;
+  fileName: string | undefined;
+};
+
+type ElementDefinitions = {
+  [name: string]: ElementDefinition | string[];
+};
+
+type ElementDefinition = {
+  paths: PathDefinitions;
+  traceables?: TraceableDefinitions;
+  paintables?: PaintableDefinitions;
+};
+
+type TransformationDefinition = {
+  scaling: Vector3;
+  position: Vector3;
+  rotation: Vector3;
+};
+
+type EnvironmentDefinition = {
+  environmentColor?: Color3;
+  environmentIntensity?: number;
+  environment?: string;
+  environmentBackground?: string;
+  environmentRotation?: number;
+  environmentUseDefault?: boolean;
+};
+
+type StructureJson = {
+  /**
+   * `scene` describes the visualisation of the babylon `scene` such as the incidence of light and camera position. If a
+   * string is given, the {@link Viewer} will resolve the URL or path and pass the parsed JSON to this property.
+   */
+  scene?: string | SceneJson;
+  /**
+   * `setup` is a kind of construction plan for the {@link Viewer}. You can pass a {@link SetupJson} or a string, which
+   * must represent a valid URL or path. If a string is given, the {@link Viewer} will resolve the URL or path and pass
+   * the parsed JSON to this property. The {@link SetupJson} is responsible for managing a list of
+   * {@link VariantInstanceDefinition}s. These definitions define the instances that should be instantiated during the
+   * bootstrapping process. Each instance has a name and a reference to it's {@link Variant}.
+   */
+  setup?: string | SetupJson;
+  file?: string;
+  glTF?: Asset | string;
+  parameterDeclaration?: ParameterDeclarations;
+  parameters?: ParameterBag;
+  elements?: ElementDefinitions;
+  lights?: LightDefinitions;
+  grounds?: GroundDefinitions;
+  /**
+   * `variants` is a declarative description of 3D-model variations in the configurator. Each variant itself is a
+   * {@link StructureJson} which must at least define a `name` in the key of the list and the properties `glTF` and
+   * `elements` in the value. FYI: Babylon.js's sandbox can show you the path of the 3D-model to properly define the
+   * `paths`.
+   *
+   * Example Code
+   * ```js
+   * variants: {
+   *     'My Pretty Variant' {
+   *         glTF: {
+   *             rootUrl: 'https:/my.awesome.domain/path/to/my/project/',
+   *             fileName: 'my_3d_model_file.glb',
+   *         },
+   *         elements: {
+   *             'My Little Element': {
+   *                 paths: {
+   *                     includes: ['__root__.MeshName']
+   *                 }
+   *             }
+   *         }
+   *     }
+   * }
+   * ```
+   * `MeshName` has to be identical to the path in the glb-file of the 3D-model.
+   */
+  variants?: {
+    [id: string]: StructureJson;
+  };
+};
+
+type AutoSpecStructureJson = StructureJson & {
+  scene: SceneJson;
+  setup: SetupJson;
+  variants: { [id: string]: StructureJson };
+};
+
+type SceneJson = {
+  parameterDeclaration?: ParameterDeclarations;
+  parameters?: ParameterBag;
+  meshPicking?: boolean;
+  /**
+   * Information about [EngineOptions](https://doc.babylonjs.com/typedoc/interfaces/babylon.engineoptions).
+   */
+  engine?: {
+    antialiasing?: boolean;
+    options?: EngineOptions;
+  };
+  scene: SceneDefinition;
+  animations?: AnimationDefinitions;
+  placements?: PlacementDefinitions;
+  /**
+   * Information about [material cloning](pages/Release%20Notes/releases/4-3-0.html#material-cloning-on-mutation).
+   * Default value is `false`.
+   */
+  cloneMaterialsOnMutation?: boolean;
+};
+
+type SceneDefinition = {
+  globals: SceneGlobals;
+  cameras?: CameraDefinitions;
+};
+
+type SceneGlobals = {
+  'shadows'?: {
+    enabled: boolean;
+    type: 'contact';
+    settings: [];
+    generator: [];
+    receiver: [];
+  };
+  /**
+   * `aa` or anti aliasing is not needed if hard edges are desired.\
+   * FYI: aa smooths edges and avoids stairs-effects.
+   */
+  'aa'?: 'fxaa';
+  'tone-mapping'?: boolean;
+  /**
+   * @bloom is widely known as glow. There you can define it’s size (Specifies the size of the bloom blur kernel,
+   * relative to the final output size) and threshold (The luminance threshold to find bright areas of the image to
+   * bloom).
+   * Further Information under [BloomEffect](https://doc.babylonjs.com/typedoc/classes/babylon.bloomeffect).
+   *
+   * @dof short for "depth-of-field" defines the focus in the view. Parameters in settings are listed in [Depth of Field and Other Lens Effects link](https://doc.babylonjs.com/divingDeeper/postProcesses/dofLenseEffects).
+   * @exposure specifies the intensity of the lightning of the view (not 3D-Model).
+   * @sharpen´s parameter `settings` are listed in [Default Rendering Pipeline Sharpening link](https://doc.babylonjs.com/divingDeeper/postProcesses/defaultRenderingPipeline#sharpening).
+   */
+  'camera-settings'?: {
+    contrast: number;
+    exposure: number;
+    bloom?: {
+      enabled: boolean;
+      size?: number;
+      threshold?: number;
+    };
+    dof?: {
+      enabled: boolean;
+      settings: {};
+    };
+    sharpen?: {
+      enabled: boolean;
+      settings: {};
+    };
+  };
+};
+
+/**
+ * {@link Viewer.screenshot} internally uses Babylon.js [ScreenshotTools.CreateScreenshotUsingRenderTarget](https://doc.babylonjs.com/typedoc/classes/babylon.screenshottools#createscreenshotusingrendertarget). \
+ * See this link for additional info about the properties.
+ */
+type ScreenshotSettings = {
+  /** Defaults to canvas width & height */
+  size?: IScreenshotSize;
+  /**
+   * Default `image/png`
+   *
+   * **Info regarding JPEG:** \
+   * Use mimeType `image/jpeg` (**not** `image/jpg`) when creating jpeg's. \
+   * Also ensure that {@link Scene.clearColor | viewer.scene.clearColor} has an alpha value of `1` as jpeg's don't
+   * support transparency. Otherwise background will always be black for jpeg's.
+   */
+  mimeType?: string;
+  /** Default `1` */
+  samples?: number;
+  /** Default `false` */
+  antialiasing?: boolean;
+  /** Default `screenshot.png` */
+  fileName?: string;
+  /** Default `false` */
+  renderSprites?: boolean;
+};
+
+/**
+ * Use this to define geometry to be excluded from autofocus, GLB export, etc.
+ */
+type ExcludedGeometry = Mesh | AbstractMesh | VariantInstance | Variant | VariantElement | Node;
+type ExcludedGeometryList = ExcludedGeometry[];
+
+type AutofocusSettings = {
+  /**
+   * Can be used to customize the margins shown around the 3d model when calling {@link Viewer.autofocusActiveCamera}.\
+   * Defaults to 1.5 when not set explicitly.
+   */
+  radiusFactor?: number;
+  adjustWheelPrecision?: boolean;
+  adjustPanningSensibility?: boolean;
+  adjustPinchPrecision?: boolean;
+  /** Desired horizontal camera angle, this won't be overwritten by the autofocus function */
+  alpha?: number;
+  /** Desired vertical camera angle, this won't be overwritten by the autofocus function */
+  beta?: number;
+  /** Optional animation for the focusing camera movement */
+  animation?: string | AnimationDefinition;
+  /** Optional list of geometry to be excluded from consideration */
+  exclude?: ExcludedGeometryList;
+};
+
+type LightDefinitions = {
+  [name: string]: LightDefinition | string;
+};
+
+type LightDefinition = {
+  type: 'baked' | 'hemispheric' | 'point' | 'directional' | 'spot';
+  path?: string;
+  shadowGenerator?: ShadowGeneratorDefinition;
+};
+
+type ShadowGeneratorDefinition = {
+  mapSize: number;
+  [others: string]: any;
+  /**
+   * Further properties like `usePoissonSampling` are set directly on the ShadowGenerator object.
+   * [Shadows](https://doc.babylonjs.com/divingDeeper/lights/shadows)
+   */
+};
+
+type GroundDefinitions = {
+  [ground: string]: GroundDefinition;
+};
+
+type GroundDefinition = {
+  type: 'baked' | 'ground' | 'heightmap';
+  meshId?: string;
+  url?: string;
+  width?: number;
+  height?: number;
+  subdivisions?: number;
+  receiveShadows?: boolean;
+  minHeight?: number;
+  maxHeight?: number;
+  alphaFilter?: number;
+  onReady?: any;
+};
+
+type CameraDefinitions = {
+  [camera: string]: CameraDefinition;
+};
+
+type CameraDefinition = {
+  /**
+   * `fov` or "Field Of View" defines as it says the view of the scene. Further information about its [theory](https://en.wikipedia.org/wiki/Field_of_view) and [implementation](https://doc.babylonjs.com/typedoc/classes/babylon.camera#fov).
+   */
+  fov?: number;
+  active?: boolean;
+  /**
+   * `arc` is a default camera position where the 3D-model is the center and the camera rotates around the 3D-model.
+   * More Information about `arc` in [ArcRotateCamera](https://doc.babylonjs.com/typedoc/classes/babylon.arcrotatecamera).
+   *
+   * NOTE: While "baked" camera definitions from a GLB or babylon file can currently not be instatiated within the
+   * `Specification`, it's still possible to use them in the viewer.\
+   * For the moment all camera definitions inside these files are automatically added to the scene and can be actived
+   * using the {@link Viewer.switchCamera} function.\
+   * The `newCamera` input has to match the name of the camera node inside the GLB/babylon file.
+   */
+  type: 'arc';
+  /**
+   * `target` overrides `arc`´s position and repositions the camera. The string has the syntax (x?: number, y?: number, z?: number) like [Vector3](https://doc.babylonjs.com/typedoc/classes/babylon.vector3).
+   */
+  target?: string;
+};
+
+type VariantInstanceDefinition = {
+  name?: string;
+  variant: DottedPathArgument;
+  parameters?: ParameterBag;
+  lazy?: boolean;
+};
+
+type SetupJson = {
+  instances: VariantInstanceDefinition[];
+};
+
+type ParameterDeclarations = {
+  [name: string]: ParameterDeclaration;
+};
+
+type ParameterDeclaration = {
+  type: 'string' | 'boolean' | 'number' | 'color' | 'select' | 'vector' | 'csl';
+  parser?: any;
+  options?: ParameterValue[];
+};
+
+type ParameterValue = string | number | boolean;
+
+type ParameterBag = {
+  [name: string]: ParameterValue;
+};
+
+type ParsedParameterBag = {
+  [name: string]: any;
+};
+
+type DottedPathArgument = string | string[] | DottedPath;
+
+type ParameterObserverResult = any;
+
+type ParameterObserver = (
+  payload: any,
+  oldValue: Undefinable<ParameterValue>,
+  newValue: ParameterValue
+) => ParameterObserverResult;
+
+type PlacementDefinitions = {
+  [name: string]: PlacementDefinition;
+};
+
+type PlacementDefinition = {
+  position?: string | Vector3;
+  alpha?: number;
+  beta?: number;
+  radius?: number;
+  target?: string | Vector3;
+};
+
+type AnimationDefinitions = {
+  [name: string]: AnimationDefinition;
+};
+
+/**
+ * See [GSAP API Docs](https://greensock.com/docs/v3/GSAP/Tween/vars) for description of `GSAPTWeenVars`.
+ *
+ * You can use the [GreenSock Ease Visualizer](https://greensock.com/ease-visualizer/) to create an animation of your
+ * liking and simply copy the `ease` function shown at the bottom of the visualizer into the `ease` property of your
+ * {@link AnimationDefinition}.
+ *
+ * The `GSAPTWeenVars` are extended by the `shortestWay` property.\
+ * This property defines if the camera should move to the target position within the shortest possible distance.\
+ * If `shortestWay` is `false`, the camera moves the whole difference between the current camera position and the target
+ * position and that could be > 360, which can appear very unconvenient to the operator.\
+ * The default value of this flag is `true`.
+ *
+ * Example usage in {@link SceneJson | SceneJson.animations}:
+ *
+ * ```js
+ * // ...
+ * scene: {
+ *   // ...
+ *   animations: {
+ *     DefaultCameraAnimation: {
+ *       ease: 'Power3.easeInOut',
+ *       duration: 0.8,
+ *     },
+ *   },
+ *   // ...
+ * }
+ * // ...
+ * ```
+ */
+type AnimationDefinition = GSAPTweenVars & { shortestWay?: boolean };
+
+/**
+ * Extends Babylon.js's {@link IExportOptions} by some viewer specific settings
+ */
+interface IExportOptionsExtended extends IExportOptions {
+  /**
+   * In certain situations multiple meshes in the viewer scene have the same name (e.g. when cloning instances).\
+   * If this option is set, the exporter adjusts all mesh names before export to have a unique name.\
+   * This is required e.g. if the exported file is used to show an AR scene with the model viewer which requires all
+   * meshes to have unique names.
+   */
+  createUniqueMeshNames?: boolean;
+}
+
+type SpecGenerationData = {
+  name: string;
+  url: string;
+};
+
+/**
+ * Key = Old tag name\
+ * Value = New tag name
+ */
+type TagMapping = {
+  [tagName: string]: string;
+};
+
+type TagManagerSubject = {
+  tagName?: string;
+  nodeName?: string;
+};
+
+type TagManagerParameterObserver = (payload: TagManagerParameterObserverPayload) => ParameterObserverResult;
+
+type TagManagerParameterBag = FuzzyMap<TagManagerSubject, ParameterBag>;
+
+type TagManagerParameterObserverBag = Map<string, TagManagerParameterObserver>;
+
+type TagManagerParameterObserverPayload = {
+  subject: TagManagerSubject;
+  nodes: TransformNode[];
+  newValue: ParameterValue;
+  oldValue: Undefinable<ParameterValue>;
+};
+
+type TagManagerParameterValue = {
+  tagName?: string;
+  nodeName?: string;
+  parameterName: string;
+  value: ParameterValue;
+};
+
+type NodeNamingStrategyPayload = {
+  variantInstance: VariantInstance;
+  variant: Variant;
+  variantParameterizable: VariantParameterizable;
+};
+
+type NodeNamingStrategyHandler = (node: TransformNode, payload: NodeNamingStrategyPayload) => string;
+
+type NodeNamingStrategy = {
+  handler: NodeNamingStrategyHandler;
+  payload: NodeNamingStrategyPayload;
+};

package/src/api/util/resourceHelper.ts

@@ -0,0 +1,191 @@
+import { Event, emitter } from '../classes/event';
+
+/**
+ * Sleeps for a certain amount of microseconds.
+ */
+const sleep = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));
+
+/**
+ * Loads any kind of response from given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const load = async function (path: string): Promise<Response> {
+  emitter.emit(Event.LOADING_START, path);
+  const data = await fetch(path);
+  emitter.emit(Event.LOADING_END, path);
+  return data;
+};
+
+/**
+ * Loads a JSON from a given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const loadJson = async function <T>(path: string): Promise<T> {
+  const response = await load(path);
+  return response.json();
+};
+
+/**
+ * Loads a Text from a given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const loadText = async function (path: string): Promise<string> {
+  const response = await load(path);
+  return response.text();
+};
+
+/**
+ * Loads a Javascript ressource.\
+ * Usefull for including packages via CDN (eg: Babylon.js Inspector)
+ */
+const loadJavascript = (url: string): Promise<void> =>
+  new Promise(resolve => {
+    const scriptEl = document.createElement('script');
+
+    scriptEl.setAttribute('src', url);
+    scriptEl.setAttribute('type', 'text/javascript');
+    scriptEl.setAttribute('crossorigin', 'anonymous');
+    scriptEl.onload = () => resolve();
+
+    document.head.appendChild(scriptEl);
+  });
+
+/**
+ * Debounces: it limits the rate at which a function can fire.
+ */
+const debounce = function (func: Function, wait: number, immediate: boolean = false) {
+  let timeout: any;
+  return function () {
+    // @ts-ignore this function is not very "ESLint friendly", also see ESLint disable comment 2 lines below
+    // => take some time to refactor this function when there is time
+    const context = this;
+    // eslint-disable-next-line prefer-rest-params
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+};
+
+/**
+ * Merges multiple maps.
+ */
+const mergeMaps = function <TKey, TValue>(...maps: Map<TKey, TValue>[]): Map<TKey, TValue> {
+  const resultMap = new Map<TKey, TValue>();
+  maps.forEach(map => {
+    map.forEach((v, k) => {
+      resultMap.set(k, v);
+    });
+  });
+  return resultMap;
+};
+
+/**
+ * Creates a HTML image element based on a SVG string, whereas all the embedded assets in the SVG (eg: fonts, images)
+ * are already loaded and exchanged by their base64 representation.\
+ * There the output image can exist as "standalone" image and may be used for example as a paintable.
+ *
+ * !!CAUTION!!: The used functions within this code section are very well evaluated since most alternatives
+ * somehow don't work in Safari, as mentioned in the following BJS forum entries:
+ * - https://forum.babylonjs.com/t/drawing-svg-content-text-into-dynamictexture-doesnt-work-in-safari-v15/25048
+ * - https://forum.babylonjs.com/t/texture-createfrombase64string-doesnt-seem-to-work-for-ios-devices-initially/25502
+ */
+const createImageFromSvg = async function (svgSrc: string): Promise<HTMLImageElement> {
+  // replace assets with their base64 versions in svg source code
+  const svgWithAssetsEmbedded = await _embedAssets(svgSrc);
+
+  // create data string which can be used as an image source
+  const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded);
+
+  return createImageFromImgSrc(svgEncoded);
+};
+
+/**
+ * Creates an HTML image element from a dedicated image source.\
+ * Also waits until the image has loaded.
+ *
+ * !!CAUTION!!: The `setTimeout` after loading is finished is required due to a Safari bug:
+ * - https://bugs.webkit.org/show_bug.cgi?id=39059
+ * - https://bugs.webkit.org/show_bug.cgi?id=219770
+ *
+ * It's not 100% ensured that the timeout solves the issue in every case, but there is no other way unfortunately.\
+ * => Keep an eye on it in future projects
+ *
+ * @param imgSrc Theoretically every source is valid which is also supported by
+ *               [HTMLImageElement.src](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src).\
+ *               Known exceptions are SVGs with embedded assets that are provided as object URL. See comments in
+ *               {@link createImageFromSvg} for further details.
+ */
+const createImageFromImgSrc = async function (imgSrc: string): Promise<HTMLImageElement> {
+  const img = new Image();
+
+  await new Promise(resolve => {
+    img.onload = () => {
+      setTimeout(resolve, 0);
+    };
+    img.src = imgSrc;
+  });
+
+  return img;
+};
+
+/**
+ * Replaces all supported image & font URLs in the given SVG with their base64 representation.
+ */
+const _embedAssets = async function (svgSrc: string): Promise<string> {
+  const _imageExtensions = ['png', 'gif', 'jpg', 'jpeg', 'svg', 'bmp'];
+  const _fontExtensions = ['woff2', 'woff', 'ttf', 'otf'];
+  const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
+  // Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
+  const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+  const allUrls = svgSrc.match(urlRegex) as string[];
+  const assetUrls = allUrls.filter(url =>
+    _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`))
+  );
+  const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
+  const assetFetcherResults = await Promise.all(assetBase64Fetcher);
+  return assetFetcherResults.reduce((svgSrc, x) => svgSrc.replace(x.url, x.base64), svgSrc);
+};
+
+/**
+ * Fetch asset (image or font) and convert it to base64 string representation.
+ */
+const _fetchBase64AssetUrl = async function (assetUrl: string): Promise<{ url: string; base64: string }> {
+  // TODO: Cache known base64 representation and only fetch/convert when not already known.
+  //       Usually the fetch shouldn't hit the network but the browser cache since the SVG was already drawn.
+  //       See comments of "createImageBitmapFromSvg" for some considerations...
+  return new Promise(async (resolve, reject) => {
+    const resp = await fetch(assetUrl);
+    const blob = await resp.blob();
+    const reader = new FileReader();
+    reader.onloadend = event => {
+      const target = event.target;
+      if (!target) {
+        return reject(`Asset with URL "${assetUrl}" could not be loaded.`);
+      }
+      const result = target.result;
+      if (!result) {
+        return reject(`Asset with URL "${assetUrl}" returned an empty result.`);
+      }
+      resolve({
+        url: assetUrl,
+        base64: result.toString() as string,
+      });
+    };
+    reader.readAsDataURL(blob);
+  });
+};
+
+export { sleep, loadJson, loadText, loadJavascript, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };