Merge pull request 0xfe#1343 from gristow/stave-connector-style

feat(StaveConnector) add getType(), tighten setType() typings
AaronDavidNewman · Apr 11, 2022 · 4bc8bf4 · 4bc8bf4
2 parents 46af63b + d605a95
commit 4bc8bf4
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 23 deletions.
diff --git a/docs/api/classes/Factory.html b/docs/api/classes/Factory.html
diff --git a/docs/api/classes/StaveConnector.html b/docs/api/classes/StaveConnector.html
diff --git a/docs/api/classes/System.html b/docs/api/classes/System.html
@@ -30,9 +30,9 @@
 As in CSS, font-weight is always returned as a string, even if it was set as a number.</p>
 </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite tsd-is-static"><a id="CATEGORY" class="tsd-anchor"></a><h3><span class="tsd-flag ts-flagStatic">Static</span> CATEGORY</h3><ul class="tsd-signatures tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite tsd-is-static"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">get</span> CATEGORY<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><p>Overrides Element.CATEGORY</p></aside><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><a id="addClass" class="tsd-anchor"></a><h3>add<wbr/>Class</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><li class="tsd-signature tsd-kind-icon">add<wbr/>Class<span class="tsd-signature-symbol">(</span>className<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="System.html" class="tsd-signature-type" data-tsd-kind="Class">System</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><p>Inherited from <a href="Element.html">Element</a>.<a href="Element.html#addClass">addClass</a></p></aside><div class="tsd-comment tsd-typography"><div class="lead">
 <p>Add a class label (An element can have multiple class labels).</p>
-</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>className: <span class="tsd-signature-type">string</span></h5></li></ul><h4 class="tsd-returns-title">Returns <a href="System.html" class="tsd-signature-type" data-tsd-kind="Class">System</a></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="addConnector" class="tsd-anchor"></a><h3>add<wbr/>Connector</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<wbr/>Connector<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="StaveConnector.html" class="tsd-signature-type" data-tsd-kind="Class">StaveConnector</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"><div class="lead">
+</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>className: <span class="tsd-signature-type">string</span></h5></li></ul><h4 class="tsd-returns-title">Returns <a href="System.html" class="tsd-signature-type" data-tsd-kind="Class">System</a></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="addConnector" class="tsd-anchor"></a><h3>add<wbr/>Connector</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<wbr/>Connector<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><a href="../modules.html#StaveConnectorType" class="tsd-signature-type" data-tsd-kind="Type alias">StaveConnectorType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="StaveConnector.html" class="tsd-signature-type" data-tsd-kind="Class">StaveConnector</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"><div class="lead">
 <p>Add connector between staves.</p>
-</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>type: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = &#39;double&#39;</span></h5><div class="tsd-comment tsd-typography"><div class="lead">
+</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>type: <a href="../modules.html#StaveConnectorType" class="tsd-signature-type" data-tsd-kind="Type alias">StaveConnectorType</a><span class="tsd-signature-symbol"> = &#39;double&#39;</span></h5><div class="tsd-comment tsd-typography"><div class="lead">
 <p>see <a href="StaveConnector.html#typeString">StaveConnector.typeString</a></p>
 </div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="StaveConnector.html" class="tsd-signature-type" data-tsd-kind="Class">StaveConnector</a></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="addStave" class="tsd-anchor"></a><h3>add<wbr/>Stave</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">add<wbr/>Stave<span class="tsd-signature-symbol">(</span>params<span class="tsd-signature-symbol">: </span><a href="../interfaces/SystemStave.html" class="tsd-signature-type" data-tsd-kind="Interface">SystemStave</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Stave.html" class="tsd-signature-type" data-tsd-kind="Class">Stave</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"><div class="lead">
 <p>Add a stave to the system.</p>

diff --git a/src/factory.ts b/src/factory.ts
@@ -31,7 +31,7 @@ import { Renderer } from './renderer';
 import { RepeatNote } from './repeatnote';
 import { Stave, StaveOptions } from './stave';
 import { BarlineType } from './stavebarline';
-import { StaveConnector } from './staveconnector';
+import { StaveConnector, StaveConnectorType } from './staveconnector';
 import { StaveLine } from './staveline';
 import { StaveNote, StaveNoteStruct } from './stavenote';
 import { StaveTie } from './stavetie';
@@ -471,7 +471,7 @@ export class Factory {
     return voice;
   }
 
-  StaveConnector(params: { top_stave: Stave; bottom_stave: Stave; type: string }): StaveConnector {
+  StaveConnector(params: { top_stave: Stave; bottom_stave: Stave; type: StaveConnectorType }): StaveConnector {
     const connector = new StaveConnector(params.top_stave, params.bottom_stave);
     connector.setType(params.type).setContext(this.context);
     this.renderQ.push(connector);

diff --git a/src/staveconnector.ts b/src/staveconnector.ts
@@ -30,6 +30,30 @@ function drawBoldDoubleLine(ctx: RenderContext, type: number, topX: number, topY
   ctx.fillRect(topX - thickLineOffset, topY, variableWidth, botY - topY);
 }
 
+/**
+ * see {@link StaveConnector.type} & {@link StaveConnector.typeString}
+ */
+export type StaveConnectorType =
+  | 'singleRight'
+  | 'singleLeft'
+  | 'single'
+  | 'double'
+  | 'brace'
+  | 'bracket'
+  | 'boldDoubleLeft'
+  | 'boldDoubleRight'
+  | 'thinDouble'
+  | 'none'
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8;
+
 /** StaveConnector implements the connector lines between staves of a system. */
 export class StaveConnector extends Element {
   static get CATEGORY(): string {
@@ -48,7 +72,7 @@ export class StaveConnector extends Element {
    * with older versions of vexflow which didn't have right sided
    * stave connectors.
    */
-  static readonly type = {
+  static readonly type: Record<string, Exclude<StaveConnectorType, string>> = {
     SINGLE_RIGHT: 0,
     SINGLE_LEFT: 1,
     SINGLE: 1,
@@ -59,7 +83,7 @@ export class StaveConnector extends Element {
     BOLD_DOUBLE_RIGHT: 6,
     THIN_DOUBLE: 7,
     NONE: 8,
-  };
+  } as const;
 
   /**
    * Connector type:
@@ -74,7 +98,7 @@ export class StaveConnector extends Element {
    * * "thinDouble"
    * * "none"
    */
-  static readonly typeString: Record<string, number> = {
+  static readonly typeString: Record<Exclude<StaveConnectorType, number>, Exclude<StaveConnectorType, string>> = {
     singleRight: StaveConnector.type.SINGLE_RIGHT,
     singleLeft: StaveConnector.type.SINGLE_LEFT,
     single: StaveConnector.type.SINGLE,
@@ -85,15 +109,15 @@ export class StaveConnector extends Element {
     boldDoubleRight: StaveConnector.type.BOLD_DOUBLE_RIGHT,
     thinDouble: StaveConnector.type.THIN_DOUBLE,
     none: StaveConnector.type.NONE,
-  };
+  } as const;
 
   protected width: number;
   protected texts: {
     content: string;
     options: { shift_x: number; shift_y: number };
   }[];
 
-  protected type: number;
+  protected type: typeof StaveConnector['type'][keyof typeof StaveConnector['type']];
 
   readonly top_stave: Stave;
   readonly bottom_stave: Stave;
@@ -121,15 +145,25 @@ export class StaveConnector extends Element {
    * Set type.
    * @param type see {@link StaveConnector.type} & {@link StaveConnector.typeString}
    */
-  setType(type: number | string): this {
-    type = typeof type === 'string' ? StaveConnector.typeString[type] : type;
+  setType(type: StaveConnectorType): this {
+    const newType = typeof type === 'string' ? StaveConnector.typeString[type] : type;
 
-    if (type >= StaveConnector.type.SINGLE_RIGHT && type <= StaveConnector.type.NONE) {
-      this.type = type;
+    // Be certain that the type is a valid type:
+    if (Object.values(StaveConnector.type).includes(newType)) {
+      this.type = newType;
     }
+
     return this;
   }
 
+  /**
+   * Get type.
+   * @returns number {@link StaveConnector.type}
+   */
+  getType(): number {
+    return this.type;
+  }
+
   /** Set optional associated Text. */
   setText(text: string, options: { shift_x?: number; shift_y?: number } = {}): this {
     this.texts.push({

diff --git a/src/system.ts b/src/system.ts
@@ -8,7 +8,7 @@ import { FormatParams, Formatter, FormatterOptions } from './formatter';
 import { Note } from './note';
 import { RenderContext } from './rendercontext';
 import { Stave, StaveOptions } from './stave';
-import { StaveConnector } from './staveconnector';
+import { StaveConnector, StaveConnectorType } from './staveconnector';
 import { Category } from './typeguard';
 import { RuntimeError } from './util';
 import { Voice } from './voice';
@@ -121,7 +121,7 @@ export class System extends Element {
    * Add connector between staves.
    * @param type see {@link StaveConnector.typeString}
    */
-  addConnector(type: string = 'double'): StaveConnector {
+  addConnector(type: StaveConnectorType = 'double'): StaveConnector {
     this.connector = this.factory.StaveConnector({
       top_stave: this.parts[0].stave,
       bottom_stave: this.parts[this.parts.length - 1].stave,