From 98959c5d3eaf5aac5fffbc715eaca9d290f6ba02 Mon Sep 17 00:00:00 2001
From: Chris Needham <chris@chrisneedham.com>
Date: Sat, 19 Oct 2024 20:49:48 +0100
Subject: [PATCH] Fixed point and segment marker font defaults

The fontFamily, fontSize, and fontStyle options weren't
being used

See #551
---
 src/points-layer.js  | 11 ++++-------
 src/segment-shape.js | 28 +++++++++++++---------------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/points-layer.js b/src/points-layer.js
index 7c204cf4..068ad4d6 100644
--- a/src/points-layer.js
+++ b/src/points-layer.js
@@ -10,10 +10,6 @@ import PointMarker from './point-marker';
 import { clamp, objectHasProperty } from './utils';
 import Konva from 'konva/lib/Core';
 
-const defaultFontFamily = 'sans-serif';
-const defaultFontSize = 10;
-const defaultFontShape = 'normal';
-
 /**
  * Creates a Konva.Layer that displays point markers against the audio
  * waveform.
@@ -144,14 +140,15 @@ PointsLayer.prototype._onPointsRemoveAll = function() {
 
 PointsLayer.prototype._createPointMarker = function(point) {
   const editable = this._enableEditing && point.editable;
+  const viewOptions = this._view.getViewOptions();
 
   const marker = this._peaks.options.createPointMarker({
     point:      point,
     editable:   editable,
     color:      point.color,
-    fontFamily: this._peaks.options.fontFamily || defaultFontFamily,
-    fontSize:   this._peaks.options.fontSize || defaultFontSize,
-    fontStyle:  this._peaks.options.fontStyle || defaultFontShape,
+    fontFamily: viewOptions.fontFamily,
+    fontSize:   viewOptions.fontSize,
+    fontStyle:  viewOptions.fontStyle,
     layer:      this,
     view:       this._view.getName()
   });
diff --git a/src/segment-shape.js b/src/segment-shape.js
index d4cad145..d0646980 100644
--- a/src/segment-shape.js
+++ b/src/segment-shape.js
@@ -13,10 +13,6 @@ import SegmentMarker from './segment-marker';
 import WaveformShape from './waveform-shape';
 import { clamp } from './utils';
 
-const defaultFontFamily = 'sans-serif';
-const defaultFontSize = 10;
-const defaultFontShape = 'normal';
-
 /**
  * Options that control segments' visual appearance
  *
@@ -67,7 +63,8 @@ function SegmentShape(segment, peaks, layer, view) {
   this._draggable   = this._segment.editable && this._view.isSegmentDraggingEnabled();
   this._dragging    = false;
 
-  const segmentOptions = view.getViewOptions().segmentOptions;
+  const viewOptions = view.getViewOptions();
+  const segmentOptions = viewOptions.segmentOptions;
 
   this._overlayOffset = segmentOptions.overlayOffset;
 
@@ -100,9 +97,9 @@ function SegmentShape(segment, peaks, layer, view) {
     segment:    segment,
     view:       this._view.getName(),
     layer:      this._layer,
-    fontFamily: this._peaks.options.fontFamily,
-    fontSize:   this._peaks.options.fontSize,
-    fontStyle:  this._peaks.options.fontStyle
+    fontFamily: viewOptions.fontFamily,
+    fontSize:   viewOptions.fontSize,
+    fontStyle:  viewOptions.fontStyle
   });
 
   if (this._label) {
@@ -200,7 +197,8 @@ function createOverlayMarker(options) {
 
 SegmentShape.prototype._createMarkers = function() {
   const editable = this._layer.isEditingEnabled() && this._segment.editable;
-  const segmentOptions = this._view.getViewOptions().segmentOptions;
+  const viewOptions = this._view.getViewOptions();
+  const segmentOptions = viewOptions.segmentOptions;
 
   let createSegmentMarker, startMarker, endMarker;
 
@@ -217,9 +215,9 @@ SegmentShape.prototype._createMarkers = function() {
       editable:       editable,
       startMarker:    true,
       color:          segmentOptions.startMarkerColor,
-      fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
-      fontSize:       this._peaks.options.fontSize || defaultFontSize,
-      fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
+      fontFamily:     viewOptions.fontFamily,
+      fontSize:       viewOptions.fontSize,
+      fontStyle:      viewOptions.fontStyle,
       layer:          this._layer,
       view:           this._view.getName(),
       segmentOptions: this._view.getViewOptions().segmentOptions
@@ -247,9 +245,9 @@ SegmentShape.prototype._createMarkers = function() {
       editable:       editable,
       startMarker:    false,
       color:          segmentOptions.endMarkerColor,
-      fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
-      fontSize:       this._peaks.options.fontSize || defaultFontSize,
-      fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
+      fontFamily:     viewOptions.fontFamily,
+      fontSize:       viewOptions.fontSize,
+      fontStyle:      viewOptions.fontStyle,
       layer:          this._layer,
       view:           this._view.getName(),
       segmentOptions: this._view.getViewOptions().segmentOptions