Merge d740e85 into 6520c32

no-chris · Jan 13, 2023 · 9430101 · 9430101
2 parents 6520c32 + d740e85
commit 9430101
Show file tree

Hide file tree

Showing 11 changed files with 326 additions and 10 deletions.
diff --git a/packages/chord-mark-themes/scss/chordMarkThemes.scss b/packages/chord-mark-themes/scss/chordMarkThemes.scss
@@ -3,3 +3,4 @@
 @import 'themes/dark3';
 @import 'themes/text';
 @import 'themes/print';
+@import 'themes/print2';
diff --git a/packages/chord-mark-themes/scss/themes/print2.scss b/packages/chord-mark-themes/scss/themes/print2.scss
@@ -0,0 +1,63 @@
+@import '../abstract';
+@import './common';
+
+.cmTheme-print2 {
+	background-color: white;
+
+	.cmSong {
+		@include base;
+		color: #333;
+		font-size: 14px;
+		line-height: 1.4em;
+		font-family: 'Menlo', 'Courier New', Courier, monospace;
+	}
+
+	// Sections
+	.cmSection {
+		border: 1px solid black;
+		border-radius: 8px;
+		padding: 0.4em;
+		margin: 0.2em 0 0.2em 0;
+		// below line only needed for wkhtmltopdf
+		break-inside: avoid;
+	}
+
+	.cmSection-Chorus {
+		background-color: #ededed;
+	}
+
+	.cmSectionLabel {
+		font-weight: bold;
+		font-size: 0.85em;
+		text-transform: uppercase;
+	}
+	.cmSectionMultiplier {
+		text-decoration: unset;
+		font-size: 0.95em;
+	}
+
+	// Time signature
+	.cmTimeSignature {
+		font-weight: bold;
+	}
+
+	// Empty Lines - Hide to save print space
+	.cmEmptyLine {
+		display: none;
+	}
+
+	// Chordline
+	.cmChordLine {
+		font-weight: bolder;
+	}
+
+	.cmBarSeparator {
+		opacity: 0.5;
+	}
+
+	.cmChordDuration,
+	.cmSubBeatGroupOpener,
+	.cmSubBeatGroupCloser {
+		opacity: 0.7;
+	}
+}
diff --git a/packages/chord-mark-themes/src/chordMarkThemes.js b/packages/chord-mark-themes/src/chordMarkThemes.js
@@ -25,6 +25,10 @@ const themes = [
 		name: 'Print',
 		key: 'print',
 	},
+	{
+		name: 'Print 2',
+		key: 'print2',
+	},
 	{
 		name: 'Text',
 		key: 'text',

diff --git a/packages/chord-mark/README.md b/packages/chord-mark/README.md
@@ -50,6 +50,8 @@ You can either use the `chord-mark-themes` module or design your own themes.
 The following list of CSS classes are available:
 
 -   `cmSong`
+-   `cmSection`
+-   `cmSection-xxx`, where `xxx` is the section name
 -   `cmLine`
 -   `cmLine--isFromAutoRepeatChords`
 -   `cmLine--isFromChordLineRepeater`

diff --git a/packages/chord-mark/lib/chord-mark.js b/packages/chord-mark/lib/chord-mark.js
@@ -17463,8 +17463,23 @@ function renderEmptyLine_render() {
 ;// CONCATENATED MODULE: ./src/renderer/components/tpl/line.js
 var line_render = function render(_ref) {
   var line = _ref.line,
-    lineClasses = _ref.lineClasses;
-  return "<p class=\"".concat(lineClasses, "\">").concat(line, "</p>");
+    lineClasses = _ref.lineClasses,
+    shouldOpenSection = _ref.shouldOpenSection,
+    sectionWrapperClasses = _ref.sectionWrapperClasses,
+    shouldClosePriorSection = _ref.shouldClosePriorSection,
+    shouldCloseFinalSection = _ref.shouldCloseFinalSection;
+  var wrapper = '';
+  if (shouldClosePriorSection) {
+    wrapper += '</div>';
+  }
+  if (shouldOpenSection) {
+    wrapper += "<div class=\"".concat(sectionWrapperClasses, "\">");
+  }
+  wrapper += "<p class=\"".concat(lineClasses, "\">").concat(line, "</p>");
+  if (shouldCloseFinalSection) {
+    wrapper += "</div>";
+  }
+  return wrapper;
 };
 /* harmony default export */ const tpl_line = (line_render);
 ;// CONCATENATED MODULE: ./src/renderer/components/renderLine.js
@@ -17476,6 +17491,10 @@ var line_render = function render(_ref) {
  * @param {Boolean} isFromChordLineRepeater
  * @param {Boolean} isFromSectionCopy
  * @param {Boolean} isFromSectionMultiply
+ * @param {Boolean} shouldOpenSection
+ * @param {Boolean} shouldClosePriorSection
+ * @param {Boolean} shouldCloseFinalSection
+ * @param {Array} sectionWrapperClasses
  * @returns {String} rendered html
  */
 function renderLine_render(line) {
@@ -17487,7 +17506,15 @@ function renderLine_render(line) {
     _ref$isFromSectionCop = _ref.isFromSectionCopy,
     isFromSectionCopy = _ref$isFromSectionCop === void 0 ? false : _ref$isFromSectionCop,
     _ref$isFromSectionMul = _ref.isFromSectionMultiply,
-    isFromSectionMultiply = _ref$isFromSectionMul === void 0 ? false : _ref$isFromSectionMul;
+    isFromSectionMultiply = _ref$isFromSectionMul === void 0 ? false : _ref$isFromSectionMul,
+    _ref$shouldOpenSectio = _ref.shouldOpenSection,
+    shouldOpenSection = _ref$shouldOpenSectio === void 0 ? false : _ref$shouldOpenSectio,
+    _ref$shouldClosePrior = _ref.shouldClosePriorSection,
+    shouldClosePriorSection = _ref$shouldClosePrior === void 0 ? false : _ref$shouldClosePrior,
+    _ref$shouldCloseFinal = _ref.shouldCloseFinalSection,
+    shouldCloseFinalSection = _ref$shouldCloseFinal === void 0 ? false : _ref$shouldCloseFinal,
+    _ref$sectionWrapperCl = _ref.sectionWrapperClasses,
+    sectionWrapperClasses = _ref$sectionWrapperCl === void 0 ? [] : _ref$sectionWrapperCl;
   var lineClasses = ['cmLine'];
   if (isFromAutoRepeatChords) {
     lineClasses.push('cmLine--isFromAutoRepeatChords');
@@ -17503,7 +17530,11 @@ function renderLine_render(line) {
   }
   return tpl_line({
     line: line,
-    lineClasses: lineClasses.join(' ')
+    lineClasses: lineClasses.join(' '),
+    shouldOpenSection: shouldOpenSection,
+    sectionWrapperClasses: sectionWrapperClasses.join(' '),
+    shouldClosePriorSection: shouldClosePriorSection,
+    shouldCloseFinalSection: shouldCloseFinalSection
   });
 }
 ;// CONCATENATED MODULE: ./src/renderer/components/tpl/sectionLabel.js
@@ -17826,6 +17857,9 @@ function renderSong(parsedSong) {
       useFlats: accidental === 'flat'
     });
   }
+  function getSectionWrapperClasses(line) {
+    return ["cmSection", "cmSection-" + line.model.rendered.label.replace(/[\d\s]/gi, "")];
+  }
   function addPrintChordsDurationsFlag(line) {
     if (line.type === parser_lineTypes.CHORD) {
       line.model.allBars.forEach(function (bar) {
@@ -17857,6 +17891,9 @@ function renderSong(parsedSong) {
     var shouldSkipSectionCopyLine = line.type !== parser_lineTypes.SECTION_LABEL && line.isFromSectionCopy && !expandSectionCopy;
     return !shouldSkipSectionMultiplyLine && !shouldSkipAutoRepeatChordLine && !shouldSkipSectionCopyLine;
   }
+  function isLastLine(allLines, i) {
+    return allLines.length - 1 === i;
+  }
   function isFiltered(line) {
     if (chartType === 'chordsFirstLyricLine') {
       if (line.type === parser_lineTypes.SECTION_LABEL) {
@@ -17889,8 +17926,12 @@ function renderSong(parsedSong) {
     }
   }
   function renderAllLines() {
-    return allLines.map(function (line) {
+    var lineIsInASection = false;
+    return allLines.map(function (line, i) {
       var rendered;
+      var shouldOpenSection = false;
+      var sectionWrapperClasses = [];
+      var shouldClosePriorSection;
       if (line.type === parser_lineTypes.CHORD) {
         rendered = renderChordLine(line.model, {
           shouldPrintBarSeparators: shouldPrintBarSeparators(line.model),
@@ -17900,6 +17941,10 @@ function renderSong(parsedSong) {
       } else if (line.type === parser_lineTypes.EMPTY_LINE) {
         rendered = renderEmptyLine_render();
       } else if (line.type === parser_lineTypes.SECTION_LABEL) {
+        shouldOpenSection = true;
+        shouldClosePriorSection = lineIsInASection;
+        lineIsInASection = true;
+        sectionWrapperClasses = getSectionWrapperClasses(line);
         rendered = renderSectionLabel(line);
       } else if (line.type === parser_lineTypes.TIME_SIGNATURE) {
         rendered = renderTimeSignature_render(line);
@@ -17913,7 +17958,11 @@ function renderSong(parsedSong) {
         isFromSectionMultiply: line.isFromSectionMultiply,
         isFromAutoRepeatChords: line.isFromAutoRepeatChords,
         isFromChordLineRepeater: line.isFromChordLineRepeater,
-        isFromSectionCopy: line.isFromSectionCopy
+        isFromSectionCopy: line.isFromSectionCopy,
+        shouldOpenSection: shouldOpenSection,
+        shouldClosePriorSection: shouldClosePriorSection,
+        shouldCloseFinalSection: isLastLine(allLines, i) && lineIsInASection,
+        sectionWrapperClasses: sectionWrapperClasses
       });
     }).filter(Boolean);
   }

diff --git a/packages/chord-mark/lib/chord-mark.js.map b/packages/chord-mark/lib/chord-mark.js.map
diff --git a/packages/chord-mark/src/renderer/components/renderLine.js b/packages/chord-mark/src/renderer/components/renderLine.js
@@ -6,6 +6,10 @@ import lineTpl from './tpl/line.js';
  * @param {Boolean} isFromChordLineRepeater
  * @param {Boolean} isFromSectionCopy
  * @param {Boolean} isFromSectionMultiply
+ * @param {Boolean} shouldOpenSection
+ * @param {Boolean} shouldClosePriorSection
+ * @param {Boolean} shouldCloseFinalSection
+ * @param {Array} sectionWrapperClasses
  * @returns {String} rendered html
  */
 export default function render(
@@ -15,6 +19,10 @@ export default function render(
 		isFromChordLineRepeater = false,
 		isFromSectionCopy = false,
 		isFromSectionMultiply = false,
+		shouldOpenSection = false,
+		shouldClosePriorSection = false,
+		shouldCloseFinalSection = false,
+		sectionWrapperClasses = [],
 	} = {}
 ) {
 	const lineClasses = ['cmLine'];
@@ -34,5 +42,9 @@ export default function render(
 	return lineTpl({
 		line,
 		lineClasses: lineClasses.join(' '),
+		shouldOpenSection,
+		sectionWrapperClasses: sectionWrapperClasses.join(' '),
+		shouldClosePriorSection,
+		shouldCloseFinalSection,
 	});
 }
diff --git a/packages/chord-mark/src/renderer/components/renderSong.js b/packages/chord-mark/src/renderer/components/renderSong.js
@@ -134,6 +134,13 @@ export default function renderSong(
 		});
 	}
 
+	function getSectionWrapperClasses(line) {
+		return [
+			'cmSection',
+			'cmSection-' + line.model.rendered.label.replace(/[\d\s]/gi, ''),
+		];
+	}
+
 	function addPrintChordsDurationsFlag(line) {
 		if (line.type === lineTypes.CHORD) {
 			line.model.allBars.forEach((bar) => {
@@ -191,6 +198,10 @@ export default function renderSong(
 		);
 	}
 
+	function isLastLine(i) {
+		return allLines.length - 1 === i;
+	}
+
 	function isFiltered(line) {
 		if (chartType === 'chordsFirstLyricLine') {
 			if (line.type === lineTypes.SECTION_LABEL) {
@@ -243,9 +254,14 @@ export default function renderSong(
 	}
 
 	function renderAllLines() {
+		let lineIsInASection = false;
+
 		return allLines
-			.map((line) => {
+			.map((line, i) => {
 				let rendered;
+				let shouldOpenSection = false;
+				let sectionWrapperClasses = [];
+				let shouldClosePriorSection;
 
 				if (line.type === lineTypes.CHORD) {
 					rendered = renderChordLineModel(line.model, {
@@ -258,6 +274,14 @@ export default function renderSong(
 				} else if (line.type === lineTypes.EMPTY_LINE) {
 					rendered = renderEmptyLine();
 				} else if (line.type === lineTypes.SECTION_LABEL) {
+					shouldOpenSection = true;
+
+					shouldClosePriorSection = lineIsInASection;
+
+					lineIsInASection = true;
+
+					sectionWrapperClasses = getSectionWrapperClasses(line);
+
 					rendered = renderSectionLabelLine(line);
 				} else if (line.type === lineTypes.TIME_SIGNATURE) {
 					rendered = renderTimeSignature(line);
@@ -267,11 +291,16 @@ export default function renderSong(
 						chartType,
 					});
 				}
+
 				return renderLine(rendered, {
 					isFromSectionMultiply: line.isFromSectionMultiply,
 					isFromAutoRepeatChords: line.isFromAutoRepeatChords,
 					isFromChordLineRepeater: line.isFromChordLineRepeater,
 					isFromSectionCopy: line.isFromSectionCopy,
+					shouldOpenSection,
+					shouldClosePriorSection,
+					shouldCloseFinalSection: isLastLine(i) && lineIsInASection,
+					sectionWrapperClasses,
 				});
 			})
 			.filter(Boolean);

diff --git a/packages/chord-mark/src/renderer/components/tpl/line.js b/packages/chord-mark/src/renderer/components/tpl/line.js
@@ -1,4 +1,27 @@
-const render = ({ line, lineClasses }) => {
-	return `<p class="${lineClasses}">${line}</p>`;
+const render = ({
+	line,
+	lineClasses,
+	shouldOpenSection,
+	sectionWrapperClasses,
+	shouldClosePriorSection,
+	shouldCloseFinalSection,
+}) => {
+	let wrapper = '';
+
+	if (shouldClosePriorSection) {
+		wrapper += '</div>';
+	}
+
+	if (shouldOpenSection) {
+		wrapper += `<div class="${sectionWrapperClasses}">`;
+	}
+
+	wrapper += `<p class="${lineClasses}">${line}</p>`;
+
+	if (shouldCloseFinalSection) {
+		wrapper += `</div>`;
+	}
+
+	return wrapper;
 };
 export default render;