[FEAT] Fit horizontally the viewport on diagram load

src/component/Options.ts

@@ -33,4 +33,6 @@ export enum FitType {
   None,
   /** Fit the whole viewport. */
   HorizontalVertical,
+  /** Fit only horizontally. */
+  Horizontal,
 }

src/component/mxgraph/BpmnMxGraph.ts

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { FitType } from '../Options';
+
 export class BpmnMxGraph extends mxGraph {
   private cumulativeZoomFactor = 1;
 
@@ -27,8 +29,9 @@ export class BpmnMxGraph extends mxGraph {
     return scale;
   }
 
-  public customFit(): void {
-    this.fit(this.border, false, 0, true, false, false);
+  public customFit(type: FitType): void {
+    const ignoreHeight = type === FitType.Horizontal;
+    this.fit(this.border, false, 0, true, false, ignoreHeight);
   }
 
   // solution inspired by https://github.com/algenty/grafana-flowcharting/blob/0.9.0/src/graph_class.ts#L1254

src/component/mxgraph/MxGraphRenderer.ts

@@ -35,7 +35,7 @@ export default class MxGraphRenderer {
     this.insertShapesAndEdges(bpmnModel);
 
     if (type != FitType.None) {
-      this.graph.customFit();
+      this.graph.customFit(type);
     }
   }
 

src/index.html

@@ -15,6 +15,7 @@ <h3>Options</h3>
             <select name="fitTypes" id="fitType-selected">
               <option value="None" selected="yes">None</option>
               <option value="HorizontalVertical">Horizontal-Vertical</option>
+              <option value="Horizontal">Horizontal</option>
             </select>
           </label>
         </div>

test/e2e/diagram.rendering.test.ts

@@ -31,12 +31,25 @@ describe('no diagram visual regression', () => {
           windows: 0.0035,
         },
       ],
+      [
+        'vertical',
+        // minimal threshold to make test pass on Github Workflow
+        // ubuntu: Expected image to match or be a close match to snapshot but was 0.0019441198722769393% different from snapshot
+        // macOS: Expected image to match or be a close match to snapshot but was 0.0019441198722769393% different from snapshot
+        // windows: Expected image to match or be a close match to snapshot but was 0.0019441198722769393% different from snapshot
+        {
+          linux: 0.00002,
+          macos: 0.00002,
+          windows: 0.00002,
+        },
+      ],
     ]),
   );
 
   describe.each([
     [FitType[FitType.None], FitType.None],
     [FitType[FitType.HorizontalVertical], FitType.HorizontalVertical],
+    [FitType[FitType.Horizontal], FitType.Horizontal],
   ])('load options: %s fit', async (fitTitle: string, fitType: FitType) => {
     const bpmnDiagramPreparation = new BpmnDiagramPreparation(new Map<string, BpmnLoadMethod>([]), { name: 'non-regression' }, 'diagram', { fitType });
     const pageTester = new PageTester(bpmnDiagramPreparation, 'viewport', 'BPMN Visualization Non Regression');