markstream-angular 2.0.0 → 2.0.1

package/dist/fesm2022/markstream-angular.mjs

@@ -4389,6 +4389,7 @@ class InfographicBlockNodeComponent {
         this.viewReady = false;
         this.destroyed = false;
         this.renderToken = 0;
+        this.renderScheduled = false;
         this.copyTimer = null;
         this.infographicInstance = null;
     }
@@ -4469,17 +4470,18 @@ class InfographicBlockNodeComponent {
     }
     ngAfterViewInit() {
         this.viewReady = true;
-        queueMicrotask(() => void this.renderInfographic());
+        this.scheduleInfographicRender();
     }
     ngOnChanges() {
         if (!this.viewReady)
             return;
         this.containerMinHeight = '';
-        queueMicrotask(() => void this.renderInfographic());
+        this.scheduleInfographicRender();
     }
     ngOnDestroy() {
         this.destroyed = true;
         this.renderToken += 1;
+        this.renderScheduled = false;
         if (this.copyTimer != null && typeof window !== 'undefined')
             window.clearTimeout(this.copyTimer);
         this.destroyInfographic();
@@ -4537,7 +4539,7 @@ class InfographicBlockNodeComponent {
     toggleCollapsed() {
         this.collapsed = !this.collapsed;
         if (!this.collapsed)
-            queueMicrotask(() => void this.renderInfographic());
+            this.scheduleInfographicRender();
         this.cdr.markForCheck();
     }
     adjustZoom(delta) {
@@ -4548,6 +4550,16 @@ class InfographicBlockNodeComponent {
         this.zoom = 1;
         this.cdr.markForCheck();
     }
+    scheduleInfographicRender() {
+        if (this.destroyed || this.renderScheduled)
+            return;
+        this.renderScheduled = true;
+        queueMicrotask(() => {
+            this.renderScheduled = false;
+            if (!this.destroyed)
+                void this.renderInfographic();
+        });
+    }
     async renderInfographic() {
         if (this.destroyed || !this.viewReady || this.collapsed || this.showSource)
             return;
@@ -4565,32 +4577,61 @@ class InfographicBlockNodeComponent {
             this.renderToken += 1;
             this.rendering = true;
             this.error = '';
-            this.svgMarkup = '';
-            clearElement(host);
             this.cdr.markForCheck();
             return;
         }
+        const final = !this.resolvedLoading;
         const token = ++this.renderToken;
         this.rendering = true;
         this.error = '';
         this.cdr.markForCheck();
+        let nextInstance = null;
+        let previousChildren = null;
         try {
             const InfographicClass = await getInfographic();
             if (!InfographicClass)
                 throw new Error('Infographic renderer is not available.');
             if (this.destroyed || token !== this.renderToken)
                 return;
-            this.destroyInfographic();
-            clearElement(host);
-            const instance = new InfographicClass({
+            previousChildren = Array.from(host.childNodes);
+            nextInstance = new InfographicClass({
                 container: host,
                 width: '100%',
                 height: '100%',
             });
-            this.infographicInstance = instance;
-            instance.render(source);
+            let renderErrorMessage = '';
+            let renderCompleted = false;
+            nextInstance.on?.('error', (error) => {
+                const errors = Array.isArray(error) ? error : [error];
+                renderErrorMessage = errors
+                    .map((item) => {
+                    if (item instanceof Error)
+                        return item.message;
+                    if (typeof item === 'string')
+                        return item;
+                    if (item && typeof item === 'object' && 'message' in item)
+                        return String(item.message ?? '');
+                    return String(item ?? '');
+                })
+                    .filter(Boolean)
+                    .join('; ');
+            });
+            nextInstance.on?.('rendered', () => {
+                renderCompleted = true;
+            });
+            nextInstance.render(source);
+            if (renderErrorMessage)
+                throw new Error(renderErrorMessage);
+            const nextChildren = Array.from(host.childNodes);
+            const replacedChildren = nextChildren.length > 0 && (nextChildren.length !== previousChildren.length
+                || nextChildren.some((child, index) => child !== previousChildren?.[index]));
+            if (!renderCompleted && !replacedChildren)
+                throw new Error('Infographic render returned empty output.');
             if (this.destroyed || token !== this.renderToken)
                 return;
+            this.infographicInstance?.destroy?.();
+            this.infographicInstance = nextInstance;
+            nextInstance = null;
             const svg = host.querySelector('svg');
             this.svgMarkup = svg ? svg.outerHTML : '';
             const measuredHeight = host.scrollHeight;
@@ -4601,13 +4642,21 @@ class InfographicBlockNodeComponent {
         catch (error) {
             if (this.destroyed || token !== this.renderToken)
                 return;
-            this.destroyInfographic();
-            this.svgMarkup = '';
-            this.showSource = true;
-            this.error = error instanceof Error ? error.message : 'Failed to render infographic.';
-            clearElement(host);
+            nextInstance?.destroy?.();
+            nextInstance = null;
+            if (final && !this.resolvedLoading && source === this.code.trim()) {
+                this.destroyInfographic();
+                this.svgMarkup = '';
+                this.showSource = true;
+                this.error = error instanceof Error ? error.message : 'Failed to render infographic.';
+                clearElement(host);
+            }
+            else if (previousChildren) {
+                host.replaceChildren(...previousChildren);
+            }
         }
         finally {
+            nextInstance?.destroy?.();
             if (token === this.renderToken) {
                 this.rendering = false;
                 this.cdr.markForCheck();
@@ -4739,7 +4788,9 @@ class InfographicBlockNodeComponent {
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
-        ></div>
+        >
+          <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
+        </div>
 
         <pre *ngIf="showSource" class="markstream-angular-enhanced-block__source"><code translate="no">{{ code }}</code></pre>
 
@@ -4872,7 +4923,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
-        ></div>
+        >
+          <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
+        </div>
 
         <pre *ngIf="showSource" class="markstream-angular-enhanced-block__source"><code translate="no">{{ code }}</code></pre>