closes #493 - Make designer and zpl extension usable from angular bun…

packages/web-component-designer-widgets-wunderbaum/src/Constants.ts

@@ -1,2 +1,30 @@
-let imporUrl = new URL((import.meta.url));
-export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
+/** Used when the module URL cannot locate the assets and the host configured
+ * nothing. Document relative, so it follows a <base href>. */
+const fallbackAssetsPath = 'assets/web-component-designer-widgets-wunderbaum/';
+
+function resolveAssetsPath(): string {
+  const configured = (globalThis as { wunderbaumWidgetsAssetsPath?: string }).wunderbaumWidgetsAssetsPath;
+  if (configured)
+    return configured.endsWith('/') ? configured : configured + '/';
+
+  // Bundlers that do not rewrite import.meta.url replace it with the build
+  // machine's file:// path, whose origin is the string "null". Only a URL the
+  // browser can actually fetch locates the assets next to this module.
+  try {
+    const imporUrl = new URL((import.meta.url));
+    if (imporUrl.protocol === 'http:' || imporUrl.protocol === 'https:')
+      return imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
+  } catch {
+    // import.meta.url unavailable or unparsable, fall through
+  }
+
+  return fallbackAssetsPath;
+}
+
+export var assetsPath = resolveAssetsPath();
+
+/** Overrides where these widgets load their icons from. Prefer setting
+ * globalThis.wunderbaumWidgetsAssetsPath before importing them. */
+export function setAssetsPath(path: string) {
+  assetsPath = path.endsWith('/') ? path : path + '/';
+}

packages/web-component-designer-zpl/src/Constants.ts

@@ -0,0 +1,40 @@
+/** Used when the module URL cannot locate the package files and the host
+ * configured nothing. Document relative, so it follows a <base href>. */
+const fallbackBasePath = 'assets/web-component-designer-zpl/';
+
+function resolveBasePath(): string {
+  const configured = (globalThis as { webComponentDesignerZplBasePath?: string }).webComponentDesignerZplBasePath;
+  if (configured)
+    return configured.endsWith('/') ? configured : configured + '/';
+
+  // Bundlers that do not rewrite import.meta.url replace it with the build
+  // machine's file:// path, which the browser cannot fetch. Only a real URL
+  // locates widgets/elements.json and assets/fonts next to this module.
+  try {
+    const moduleUrl = new URL(import.meta.url);
+    if (moduleUrl.protocol === 'http:' || moduleUrl.protocol === 'https:')
+      return moduleUrl.origin + moduleUrl.pathname.split('/').slice(0, -1).join('/') + '/';
+  } catch {
+    // import.meta.url unavailable or unparsable, fall through
+  }
+
+  return fallbackBasePath;
+}
+
+/** Directory holding this package's runtime files: widgets/elements.json and
+ * assets/fonts. Both must be published by the host application. */
+export var zplBasePath = resolveBasePath();
+
+/** Overrides where the ZPL add-on loads its element definitions and printer
+ * fonts from. Prefer setting globalThis.webComponentDesignerZplBasePath before
+ * importing the add-on, so nothing reads the value before it is configured. */
+export function setZplBasePath(path: string) {
+  zplBasePath = path.endsWith('/') ? path : path + '/';
+}
+
+/** Resolves a package relative file against the configured base path, so a
+ * document relative default still produces an absolute URL. */
+export function zplPackageUrl(relativePath: string): URL {
+  const base = typeof document === 'undefined' ? undefined : document.baseURI;
+  return new URL(zplBasePath + relativePath, base);
+}

packages/web-component-designer-zpl/src/fonts/zplFonts.ts

@@ -1,3 +1,5 @@
+import { zplPackageUrl } from '../Constants.js';
+
 export type ZplFontName = '0' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
 
 export interface ZplDeviceFontMetrics {
@@ -78,7 +80,7 @@ export async function loadZplFonts(document: Document): Promise<void> {
             ['ZplOCRA', 'OCRA.ttf']
         ] as const;
         loading = Promise.all(sources.map(async ([family, file]) => {
-            const url = new URL(`../assets/fonts/${file}`, import.meta.url);
+            const url = zplPackageUrl(`assets/fonts/${file}`);
             const face = new FontFace(family, `url(${url})`);
             await face.load();
             document.fonts.add(face);

packages/web-component-designer-zpl/src/index.ts

@@ -23,4 +23,5 @@ export * from "./barcodes/barcodeRegistry.js";
 export * from "./barcodes/bwipRenderer.js";
 export * from "./fonts/zplFonts.js";
 export * from "./setupZplServiceContainer.js";
-export * from "./zplHelper.js";
+export * from "./zplHelper.js";
+export * from "./Constants.js";

packages/web-component-designer-zpl/src/setupZplServiceContainer.ts

@@ -1,4 +1,5 @@
 import { DefaultPropertyEditorTypesService, DefaultEditorTypeService, ExtensionType, DefaultModelCommandService, DefaultHtmlParserService, JsonFileElementsService, ServiceContainer, PositionExtensionProvider, GrayOutExtensionProvider, AltToEnterContainerExtensionProvider, NamedTools, PointerTool, RectangleSelectorTool, ZoomTool, PanTool, MagicWandSelectorTool, ZMoveContextMenu, CopyPasteContextMenu, MultipleItemsSelectedContextMenu, ItemsBelowContextMenu, ElementDragTitleExtensionProvider, PointerToolButtonProvider, SeperatorToolProvider, SelectorToolButtonProvider, ZoomToolButtonProvider, HighlightElementExtensionProvider, IDesignerCanvas, SelectionService, UndoService, GrayOutDragOverContainerExtensionProvider, ElementAtPointService, SnaplinesProviderService, DefaultInstanceService, PropertyGroupsService, DesignItemDocumentPositionService, DragDropService, BaseCustomWebComponentPropertiesService, TransformToolButtonProvider, DesignItemService, DeletionService, ResizeExtensionProvider } from '@node-projects/web-component-designer';
+import { zplPackageUrl } from './Constants.js';
 import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js';
 import { ZplParserService } from './services/ZplParserService.js';
 import { ZplImageDrop } from './services/ZplImageDrop.js';
@@ -100,7 +101,7 @@ export function createZplDesignerServiceContainer() {
 
     serviceContainer.config.demoViewWidget = ZplDemoView;
 
-    serviceContainer.register('elementsService', new JsonFileElementsService('zpl', new URL("./widgets/elements.json", import.meta.url)));
+    serviceContainer.register('elementsService', new JsonFileElementsService('zpl', zplPackageUrl('widgets/elements.json')));
     serviceContainer.register('elementsService', new ZplBarcodeElementsService());
 
     return serviceContainer;

packages/web-component-designer/src/Constants.ts

@@ -2,5 +2,36 @@ export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
 export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
 export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';
 
-let imporUrl = new URL((import.meta.url));
-export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
+/** Used when the module URL cannot locate the assets and the host configured
+ * nothing. Document relative, so it follows a <base href>. */
+const fallbackAssetsPath = 'assets/web-component-designer/';
+
+function resolveAssetsPath(): string {
+  const configured = (globalThis as { webComponentDesignerAssetsPath?: string }).webComponentDesignerAssetsPath;
+  if (configured)
+    return configured.endsWith('/') ? configured : configured + '/';
+
+  // Bundlers that do not rewrite import.meta.url replace it with the build
+  // machine's file:// path, whose origin is the string "null". Only a URL the
+  // browser can actually fetch locates the assets next to this module.
+  try {
+    const imporUrl = new URL((import.meta.url));
+    if (imporUrl.protocol === 'http:' || imporUrl.protocol === 'https:')
+      return imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
+  } catch {
+    // import.meta.url unavailable or unparsable, fall through
+  }
+
+  return fallbackAssetsPath;
+}
+
+export var assetsPath = resolveAssetsPath();
+
+/** Overrides where the designer loads its icons from.
+ *
+ * Prefer setting globalThis.webComponentDesignerAssetsPath before importing the
+ * designer: widgets such as SelectionToolPopup bake assetsPath into a static
+ * template while their module evaluates, and never observe a later change. */
+export function setAssetsPath(path: string) {
+  assetsPath = path.endsWith('/') ? path : path + '/';
+}

packages/web-component-designer/src/elements/documentContainer.ts

@@ -240,8 +240,8 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend implemen
       this.designerView.instanceServiceContainer.collaborationService.disconnect();
       this.designerView.instanceServiceContainer.collaborationService.detachTransport();
     }
-    this.codeView.dispose();
-    this.demoView.dispose();
+    this.codeView?.dispose();
+    this.demoView?.dispose();
   }
 
   executeCommand(command: IUiCommand) {

packages/web-component-designer/src/elements/services/ServiceContainer.ts

@@ -107,7 +107,8 @@ export class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
 
   readonly config: {
     codeViewWidget: new (...args: any[]) => ICodeView & HTMLElement;
-    demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
+    /** Null removes the preview tab, which DocumentContainer already checks for. */
+    demoViewWidget: (new (...args: any[]) => IDemoView & HTMLElement) | null;
     openBindingsEditor?: (property: IProperty, designItems: IDesignItem[], binding: IBinding, bindingTarget: BindingTarget) => Promise<void>
   } = {
       codeViewWidget: CodeViewSimple,