RelationshipChart: make maxImages configurable

gramps-project · Nov 4, 2024 · f9bbedc · f9bbedc
1 parent 5ae2ae7
commit f9bbedc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/src/components/GrampsjsRelationshipChart.js b/src/components/GrampsjsRelationshipChart.js
@@ -35,6 +35,7 @@ class GrampsjsRelationshipChart extends GrampsjsChartBase {
     return {
       grampsId: {type: String},
       nAnc: {type: Number},
+      nMaxImages: {type: Number},
       gapX: {type: Number},
     }
   }
@@ -56,6 +57,7 @@ class GrampsjsRelationshipChart extends GrampsjsChartBase {
     return html`
       ${RelationshipChart(this.data, {
         nAnc: this.nAnc,
+        maxImages: this.nMaxImages,
         grampsId: this.grampsId,
         getImageUrl: d => getImageUrl(d?.data || {}, 200),
         gapX: this.gapX,

diff --git a/src/views/GrampsjsViewRelationshipChart.js b/src/views/GrampsjsViewRelationshipChart.js
@@ -19,6 +19,7 @@ export class GrampsjsViewRelationshipChart extends GrampsjsViewTreeChartBase {
     super()
     this.nAnc = 2
     this._setSep = true
+    this._setMaxImages = true
     this.color = ''
   }
 
@@ -43,6 +44,7 @@ export class GrampsjsViewRelationshipChart extends GrampsjsViewTreeChartBase {
       <grampsjs-relationship-chart
         grampsId=${this.grampsId}
         nAnc=${this.nAnc + 1}
+        nMaxImages=${this.nMaxImages}
         .data=${this._data}
       >
       </grampsjs-relationship-chart>

diff --git a/src/views/GrampsjsViewTreeChartBase.js b/src/views/GrampsjsViewTreeChartBase.js
@@ -42,7 +42,7 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
         }
 
         #menu-controls mwc-textfield {
-          width: 4em;
+          width: 6em;
         }
       `,
     ]
@@ -55,9 +55,11 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
       disableHome: {type: Boolean},
       nAnc: {type: Number},
       nDesc: {type: Number},
+      nMaxImages: {type: Number},
       _data: {type: Array},
       _setAnc: {type: Boolean},
       _setDesc: {type: Boolean},
+      _setMaxImages: {type: Boolean},
     }
   }
 
@@ -66,12 +68,14 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
     this.grampsId = ''
     this.nAnc = 3
     this.nDesc = 1
+    this.nMaxImages = 50
     this.disableBack = false
     this.disableHome = false
     this._data = []
     this._setAnc = false
     this._setDesc = false
     this._setSep = false
+    this._setMaxImages = false
   }
 
   renderContent() {
@@ -176,6 +180,23 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
             </tr>
           `
         : ''
+    }${
+      this._setMaxImages
+        ? html`
+            <tr>
+              <td>${this._('Max Number of Images displayed')}</td>
+              <td>
+                <mwc-textfield
+                  value=${this.nMaxImages}
+                  type="number"
+                  min="0"
+                  size="5"
+                  @change=${this._handleChangeMaxImages}
+                ></mwc-textfield>
+              </td>
+            </tr>
+          `
+        : ''
     }
           </table>
           <mwc-button slot="primaryAction" dialogAction="close"
@@ -208,7 +229,8 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
     if (
       changed.has('grampsId') ||
       changed.has('nAnc') ||
-      changed.has('nDesc')
+      changed.has('nDesc') ||
+      changed.has('nMaxImages')
     ) {
       this._fetchData(this.grampsId)
     }
@@ -267,6 +289,10 @@ export class GrampsjsViewTreeChartBase extends GrampsjsView {
     this.nDesc = parseInt(e.target.value, 10)
   }
 
+  _handleChangeMaxImages(e) {
+    this.nMaxImages = parseInt(e.target.value, 10)
+  }
+
   _openMenuControls() {
     const menu = this.shadowRoot.getElementById('menu-controls')
     menu.open = true