markstream-angular 2.0.12 → 2.0.13

package/dist/fesm2022/markstream-angular.mjs

@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, forwardRef, inject, ChangeDetectorRef, ViewChild, ViewContainerRef, ElementRef, Renderer2, Directive, HostListener, Injectable, InjectionToken, EventEmitter, Output } from '@angular/core';
 import { normalizeCustomHtmlTags, normalizeCustomHtmlTagName, parseMarkdownToStructure, mergeCustomHtmlTags, getMarkdown, sanitizeHtmlAttrs, VOID_HTML_TAGS, BLOCKED_HTML_TAGS, isHtmlTagHardBlocked, isHtmlTagBlocked, isUnsafeHtmlUrl, shouldOpenLinkInNewTab, sanitizeImageSrc, NON_STRUCTURING_HTML_TAGS, toSafeMermaidSvgMarkup, getHtmlTagFromContent, stripCustomHtmlWrapper, STANDARD_HTML_TAGS, hasCompleteHtmlTagContent } from 'stream-markdown-parser';
+import { createPanGesture, createSmoothMarkdownStream } from 'markstream-core';
 import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
-import { createSmoothMarkdownStream } from 'markstream-core';
 
 const TAG_TOKEN_RE = /<\/?([A-Z][\w:-]*)(?:\s[^<>]*)?>/gi;
 function hydrateCustomTagContent(nodes, source, customHtmlTags) {
@@ -4413,6 +4413,9 @@ class InfographicBlockNodeComponent {
         this.showSource = false;
         this.modalOpen = false;
         this.zoom = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.isDragging = false;
         this.error = '';
         this.containerMinHeight = '';
         this.svgMarkup = '';
@@ -4422,6 +4425,31 @@ class InfographicBlockNodeComponent {
         this.renderScheduled = false;
         this.copyTimer = null;
         this.infographicInstance = null;
+        // Drag functionality. The gesture lifecycle (window listeners, pointer identity,
+        // lost releases) lives in markstream-core so every package pans identically.
+        this.panGesture = createPanGesture({
+            getTranslate: () => ({ x: this.translateX, y: this.translateY }),
+            setTranslate: (next) => {
+                this.translateX = next.x;
+                this.translateY = next.y;
+                this.cdr.markForCheck();
+            },
+            canStart: (event) => {
+                // Nothing to pan until the diagram exists. Without this the pending/error
+                // source panel would be claimed by the gesture, and `preventDefault` would
+                // take text selection away from it.
+                if (!this.hasDiagramSvg())
+                    return false;
+                // Touch pans only where the surface claims the gesture. Elsewhere the page
+                // keeps the swipe for scrolling, and panning along with it would shift the
+                // diagram by a few pixels before the browser takes the gesture over.
+                return event.pointerType !== 'touch' || this.panSurfaceClaimsTouch;
+            },
+            onActiveChange: (active) => {
+                this.isDragging = active;
+                this.cdr.markForCheck();
+            },
+        });
     }
     get mergedProps() {
         return {
@@ -4508,8 +4536,31 @@ class InfographicBlockNodeComponent {
     get resolvedProgressiveRender() {
         return this.mergedProps.progressiveRender === true;
     }
+    /**
+     * The diagram is scaled to fit the preview box, so at fit zoom nothing is
+     * off-screen and panning only shifts it inside the box. Touch therefore keeps
+     * scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+     * the gesture once the diagram is zoomed in and actually overflows the box.
+     * The fullscreen modal always claims it: the surface fills the viewport, panning
+     * is the intended gesture there, and the page behind it is locked anyway.
+     */
+    get panSurfaceClaimsTouch() {
+        return this.modalOpen || this.zoom > 1;
+    }
+    get previewTransform() {
+        return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoom})`;
+    }
     get modalTransform() {
-        return `scale(${this.zoom})`;
+        return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoom})`;
+    }
+    /**
+     * Whether a pan surface holds a rendered diagram. The modal renders its own
+     * copy of the SVG, so it is checked as well: the source panel may have taken
+     * the inline preview's place while the modal is open.
+     */
+    hasDiagramSvg() {
+        return !!this.previewHost?.nativeElement?.querySelector('svg')
+            || !!this.modalHost?.nativeElement?.querySelector('svg');
     }
     ngAfterViewInit() {
         this.viewReady = true;
@@ -4525,6 +4576,7 @@ class InfographicBlockNodeComponent {
         this.destroyed = true;
         this.renderToken += 1;
         this.renderScheduled = false;
+        this.panGesture.stop();
         if (this.copyTimer != null && typeof window !== 'undefined')
             window.clearTimeout(this.copyTimer);
         this.destroyInfographic();
@@ -4591,8 +4643,13 @@ class InfographicBlockNodeComponent {
     }
     resetZoom() {
         this.zoom = 1;
+        this.translateX = 0;
+        this.translateY = 0;
         this.cdr.markForCheck();
     }
+    onPanStart(event) {
+        this.panGesture.start(event);
+    }
     scheduleInfographicRender() {
         if (this.destroyed || this.renderScheduled)
             return;
@@ -4831,6 +4888,10 @@ class InfographicBlockNodeComponent {
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
+          [style.transform]="previewTransform"
+          [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+          [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+          (pointerdown)="onPanStart($event)"
         >
           <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
         </div>
@@ -4860,7 +4921,13 @@ class InfographicBlockNodeComponent {
           <button type="button" class="mermaid-modal-close" (click)="closeModal()">Close</button>
         </div>
         <div class="mermaid-modal-body">
-          <div class="mermaid-modal-content" [style.transform]="modalTransform">
+          <div
+            class="mermaid-modal-content"
+            [style.transform]="modalTransform"
+            [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+            [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+            (pointerdown)="onPanStart($event)"
+          >
             <div #modalHost class="fullscreen"></div>
           </div>
         </div>
@@ -4966,6 +5033,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
+          [style.transform]="previewTransform"
+          [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+          [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+          (pointerdown)="onPanStart($event)"
         >
           <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
         </div>
@@ -4995,7 +5066,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           <button type="button" class="mermaid-modal-close" (click)="closeModal()">Close</button>
         </div>
         <div class="mermaid-modal-body">
-          <div class="mermaid-modal-content" [style.transform]="modalTransform">
+          <div
+            class="mermaid-modal-content"
+            [style.transform]="modalTransform"
+            [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+            [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+            (pointerdown)="onPanStart($event)"
+          >
             <div #modalHost class="fullscreen"></div>
           </div>
         </div>
@@ -6791,6 +6868,9 @@ class MermaidBlockNodeComponent {
         this.showSource = false;
         this.modalOpen = false;
         this.zoom = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.isDragging = false;
         this.svgMarkup = '';
         this.error = '';
         this.viewReady = false;
@@ -6798,6 +6878,31 @@ class MermaidBlockNodeComponent {
         this.renderToken = 0;
         this.copyTimer = null;
         this.lastMermaidBindFunctions = null;
+        // Drag functionality. The gesture lifecycle (window listeners, pointer identity,
+        // lost releases) lives in markstream-core so every package pans identically.
+        this.panGesture = createPanGesture({
+            getTranslate: () => ({ x: this.translateX, y: this.translateY }),
+            setTranslate: (next) => {
+                this.translateX = next.x;
+                this.translateY = next.y;
+                this.cdr.markForCheck();
+            },
+            canStart: (event) => {
+                // Nothing to pan until the diagram exists. Without this the error message the
+                // block renders in the preview would be claimed by the gesture, and
+                // `preventDefault` would take text selection away from it.
+                if (!this.hasDiagramSvg())
+                    return false;
+                // Touch pans only where the surface claims the gesture. Elsewhere the page
+                // keeps the swipe for scrolling, and panning along with it would shift the
+                // diagram by a few pixels before the browser takes the gesture over.
+                return event.pointerType !== 'touch' || this.panSurfaceClaimsTouch;
+            },
+            onActiveChange: (active) => {
+                this.isDragging = active;
+                this.cdr.markForCheck();
+            },
+        });
     }
     get mergedProps() {
         return {
@@ -6888,11 +6993,31 @@ class MermaidBlockNodeComponent {
     get resolvedProgressiveRender() {
         return this.mergedProps.progressiveRender === true;
     }
+    /**
+     * The diagram is scaled to fit the preview box, so at fit zoom nothing is
+     * off-screen and panning only shifts it inside the box. Touch therefore keeps
+     * scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+     * the gesture once the diagram is zoomed in and actually overflows the box.
+     * The fullscreen modal always claims it: the surface fills the viewport, panning
+     * is the intended gesture there, and the page behind it is locked anyway.
+     */
+    get panSurfaceClaimsTouch() {
+        return this.modalOpen || this.zoom > 1;
+    }
     get previewTransform() {
-        return `scale(${this.zoom})`;
+        return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoom})`;
     }
     get modalTransform() {
-        return `scale(${Math.max(1, this.zoom)})`;
+        return `translate(${this.translateX}px, ${this.translateY}px) scale(${Math.max(1, this.zoom)})`;
+    }
+    /**
+     * Whether a pan surface holds a rendered diagram. The modal renders its own
+     * copy of the SVG, so it is checked as well: the source panel may have taken
+     * the inline preview's place while the modal is open.
+     */
+    hasDiagramSvg() {
+        return !!this.previewHost?.nativeElement?.querySelector('svg')
+            || !!this.modalHost?.nativeElement?.querySelector('svg');
     }
     ngAfterViewInit() {
         this.viewReady = true;
@@ -6906,6 +7031,7 @@ class MermaidBlockNodeComponent {
     ngOnDestroy() {
         this.destroyed = true;
         this.renderToken += 1;
+        this.panGesture.stop();
         if (this.copyTimer != null && typeof window !== 'undefined')
             window.clearTimeout(this.copyTimer);
     }
@@ -6968,8 +7094,13 @@ class MermaidBlockNodeComponent {
     }
     resetZoom() {
         this.zoom = 1;
+        this.translateX = 0;
+        this.translateY = 0;
         this.cdr.markForCheck();
     }
+    onPanStart(event) {
+        this.panGesture.start(event);
+    }
     handleModalWheel(event) {
         if (this.mergedProps.enableWheelZoom !== true)
             return;
@@ -7371,6 +7502,9 @@ class MermaidBlockNodeComponent {
           [style.minHeight.px]="estimatedPreviewHeightPx"
           [style.height.px]="estimatedPreviewHeightPx"
           [style.transform]="previewTransform"
+          [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+          [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+          (pointerdown)="onPanStart($event)"
         >
           <div #previewHost class="markstream-angular-mermaid" [class.is-empty]="!svgMarkup"></div>
         </div>
@@ -7403,6 +7537,9 @@ class MermaidBlockNodeComponent {
           <div
             class="mermaid-modal-content"
             [style.transform]="modalTransform"
+            [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+            [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+            (pointerdown)="onPanStart($event)"
             (wheel)="handleModalWheel($event)"
           >
             <div #modalHost class="markstream-angular-mermaid fullscreen"></div>
@@ -7516,6 +7653,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           [style.minHeight.px]="estimatedPreviewHeightPx"
           [style.height.px]="estimatedPreviewHeightPx"
           [style.transform]="previewTransform"
+          [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+          [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+          (pointerdown)="onPanStart($event)"
         >
           <div #previewHost class="markstream-angular-mermaid" [class.is-empty]="!svgMarkup"></div>
         </div>
@@ -7548,6 +7688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           <div
             class="mermaid-modal-content"
             [style.transform]="modalTransform"
+            [style.touch-action]="panSurfaceClaimsTouch ? 'none' : null"
+            [style.cursor]="isDragging ? 'grabbing' : 'grab'"
+            (pointerdown)="onPanStart($event)"
             (wheel)="handleModalWheel($event)"
           >
             <div #modalHost class="markstream-angular-mermaid fullscreen"></div>