Change to using display mode yaml

cypress/integration/rendering/gantt.spec.js

@@ -439,11 +439,13 @@ describe('Gantt diagram', () => {
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `
+      ---
+      displayMode: compact
+      ---
       gantt
         title GANTT compact
         dateFormat  HH:mm:ss
         axisFormat  %Hh%M
-        compact
 
         section DB Clean
         Clean: 12:00:00, 10m

demos/gantt.html

@@ -167,11 +167,13 @@
     <hr />
 
     <pre class="mermaid">
+    ---
+      displayMode: compact
+    ---
     gantt
     title GANTT compact
     dateFormat  HH:mm:ss
     axisFormat  %Hh%M
-    compact
 
     section DB Clean
     Clean: 12:00:00, 10m

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2107](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2107)
+[defaultConfig.ts:2103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2103)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -88,7 +88,7 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
     topAxis: false,
-    compact: false,
+    displayMode: '',
   },
 };
 mermaid.initialize(config);

docs/syntax/gantt.md

@@ -259,13 +259,15 @@ More info in: <https://github.com/d3/d3-time#interval_every>
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
 
 ```mermaid-example
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d
@@ -274,10 +276,12 @@ gantt
 ```
 
 ```mermaid
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d

packages/mermaid/src/commonDb.ts

@@ -3,6 +3,7 @@ import { getConfig } from './config';
 let title = '';
 let diagramTitle = '';
 let description = '';
+
 const sanitizeText = (txt: string): string => _sanitizeText(txt, getConfig());
 
 export const clear = function (): void {
@@ -36,10 +37,10 @@ export const getDiagramTitle = function (): string {
 };
 
 export default {
-  setAccTitle,
   getAccTitle,
+  setAccTitle,
+  getDiagramTitle,
   setDiagramTitle,
-  getDiagramTitle: getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear,

packages/mermaid/src/config.type.ts

@@ -335,7 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
-  compact?: boolean;
+  displayMode?: string;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {

packages/mermaid/src/defaultConfig.ts

@@ -659,6 +659,17 @@ const config: Partial<MermaidConfig> = {
      */
     numberSectionStyles: 4,
 
+    /**
+     * | Parameter   | Description               | Type   | Required | Values    |
+     * | ----------- | ------------------------- | ------ | -------- | --------- |
+     * | displayMode | Controls the display mode | string | 4        | 'compact' |
+     *
+     * **Notes**:
+     *
+     * - **compact**: Enables displaying multiple tasks on the same row.
+     */
+    displayMode: '',
+
     /**
      * | Parameter  | Description                  | Type | Required | Values           |
      * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
@@ -684,21 +695,6 @@ const config: Partial<MermaidConfig> = {
      * Default value: undefined
      */
     tickInterval: undefined,
-
-    /**
-     * | Parameter | Description               | Type    | Required | Values      |
-     * | --------- | ------------------------- | ------- | -------- | ----------- |
-     * | compact   | displays in compact mode  | boolean | 4        | True, False |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, it allows multiple tasks to be displayed on the same
-     * row.
-     *
-     * Default value: false
-     */
-    compact: false,
-
     /**
      * | Parameter   | Description | Type    | Required | Values      |
      * | ----------- | ----------- | ------- | -------- | ----------- |

packages/mermaid/src/diagram-api/frontmatter.ts

@@ -11,6 +11,8 @@ export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
 
 type FrontMatterMetadata = {
   title?: string;
+  // Allows custom display modes. Currently used for compact mode in gantt charts.
+  displayMode?: string;
 };
 
 /**
@@ -33,6 +35,10 @@ export function extractFrontMatter(text: string, db: DiagramDb): string {
       db.setDiagramTitle?.(parsed.title);
     }
 
+    if (parsed?.displayMode) {
+      db.setDisplayMode?.(parsed.displayMode);
+    }
+
     return text.slice(matches[0].length);
   } else {
     return text;

packages/mermaid/src/diagram-api/types.ts

@@ -16,6 +16,7 @@ export interface InjectUtils {
 export interface DiagramDb {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
+  setDisplayMode?: (title: string) => void;
   getAccTitle?: () => string;
   getAccDescription?: () => string;
   bindFunctions?: (element: Element) => void;

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -32,11 +32,11 @@ let links = {};
 let sections = [];
 let tasks = [];
 let currentSection = '';
+let displayMode = '';
 const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
-let compact = false;
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -56,13 +56,13 @@ export const clear = function () {
   rawTasks = [];
   dateFormat = '';
   axisFormat = '';
+  displayMode = '';
   tickInterval = undefined;
   todayMarker = '';
   includes = [];
   excludes = [];
   inclusiveEndDates = false;
   topAxis = false;
-  compact = false;
   lastOrder = 0;
   links = {};
   commonClear();
@@ -112,12 +112,12 @@ export const topAxisEnabled = function () {
   return topAxis;
 };
 
-export const enableCompact = function () {
-  compact = true;
+export const setDisplayMode = function (txt) {
+  displayMode = txt;
 };
 
-export const compactEnabled = function () {
-  return compact;
+export const getDisplayMode = function () {
+  return displayMode;
 };
 
 export const getDateFormat = function () {
@@ -723,14 +723,14 @@ export default {
   getAxisFormat,
   setTickInterval,
   getTickInterval,
-  enableCompact,
-  compactEnabled,
   setTodayMarker,
   getTodayMarker,
   setAccTitle,
   getAccTitle,
   setDiagramTitle,
   getDiagramTitle,
+  setDisplayMode,
+  getDisplayMode,
   setAccDescription,
   getAccDescription,
   addSection,

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -34,7 +34,7 @@ describe('when using the ganttDb', function () {
     beforeEach(function () {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
-      ganttDb.enableCompact();
+      ganttDb.setDisplayMode('compact');
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
@@ -54,7 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
-      ${'compactEnabled'}       | ${false}
+      ${'getDisplayMode'}       | ${''}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -29,8 +29,8 @@ export const setConf = function () {
  * https://github.com/mermaid-js/mermaid/issues/1618
  *
  * Finds the number of intersections between tasks that happen at any point in time.
- * Used to figure out how many rows are needed to display the tasks when the compact
- * flag is set to true.
+ * Used to figure out how many rows are needed to display the tasks when the display
+ * mode is set to 'compact'.
  *
  * @param tasks
  * @param orderOffset
@@ -58,6 +58,7 @@ const getMaxIntersections = (tasks, orderOffset) => {
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
+
   // diagObj.db.clear();
   // parser.parse(text);
   const securityLevel = getConfig().securityLevel;
@@ -97,7 +98,7 @@ export const draw = function (text, id, version, diagObj) {
   const categoryHeights = {};
 
   let h = 2 * conf.topPadding;
-  if (diagObj.db.compactEnabled() || conf.compact) {
+  if (diagObj.db.getDisplayMode() === 'compact' || conf.displayMode === 'compact') {
     const categoryElements = {};
     for (const element of taskArray) {
       if (categoryElements[element.section] === undefined) {
@@ -210,7 +211,7 @@ export const draw = function (text, id, version, diagObj) {
    * @param w
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
-    // Get unique task orders. Required to draw the background rects when compact flag is enabled.
+    // Get unique task orders. Required to draw the background rects when display mode is compact.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
 

packages/mermaid/src/diagrams/gantt/parser/gantt.jison

@@ -79,7 +79,6 @@ that id.
 
 "gantt"                     return 'gantt';
 "dateFormat"\s[^#\n;]+      return 'dateFormat';
-"compact"                   return 'compact';
 "inclusiveEndDates"         return 'inclusiveEndDates';
 "topAxis"                   return 'topAxis';
 "axisFormat"\s[^#\n;]+      return 'axisFormat';
@@ -132,7 +131,6 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
-  | compact { yy.enableCompact();$$=$1.substr(8); }
   | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
   | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }

packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

@@ -37,12 +37,6 @@ describe('when parsing a gantt diagram it', function () {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
-  it('should handle a compact definition', function () {
-    const str =
-      'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\ncompact\nexcludes weekdays 2019-02-01';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
   it('should handle a todayMarker definition', function () {
     spyOn(ganttDb, 'setTodayMarker');
     const str =

packages/mermaid/src/docs/syntax/gantt.md

@@ -191,13 +191,15 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
 
 ```mmd
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d

packages/mermaid/src/mermaidAPI.ts

@@ -650,7 +650,7 @@ function addA11yInfo(
  *       numberSectionStyles: 4,
  *       axisFormat: '%Y-%m-%d',
  *       topAxis: false,
- *       compact: false,
+ *       displayMode: '',
  *     },
  *   };
  *   mermaid.initialize(config);