Allow changing number if generations in graph

gramps-project · Oct 9, 2021 · 4af4f3c · 4af4f3c
1 parent 8924c19
commit 4af4f3c
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 3 deletions.
diff --git a/src/components/GrampsjsGraph.js b/src/components/GrampsjsGraph.js
@@ -2,12 +2,13 @@ import {html, css, LitElement} from 'lit'
 
 import * as hpccWasm from '@hpcc-js/wasm'
 
+import '@material/mwc-dialog'
 import '@material/mwc-icon'
 import '@material/mwc-icon-button'
 import '@material/mwc-list/mwc-list-item'
 
 import {sharedStyles} from '../SharedStyles.js'
-import {fireEvent} from '../util.js'
+import {translate, fireEvent} from '../util.js'
 
 // transform 2D coordinates (x, y) to SVG coordinates.
 // element can be the SVG itself or an element within it
@@ -121,6 +122,10 @@ class GrampsjsGraph extends LitElement {
       svg {
         cursor: grab;
       }
+
+      mwc-dialog mwc-icon-button {
+        vertical-align: middle;
+      }
       `
     ]
   }
@@ -131,6 +136,9 @@ class GrampsjsGraph extends LitElement {
       scale: {type: Number},
       disableBack: {type: Boolean},
       disableHome: {type: Boolean},
+      strings: {type: Object},
+      nAnc: {type: Number},
+      nDesc: {type: Number},
       _svg: {type: Object},
       _svgPointerDown: {type: Boolean},
       _zoomInPointerDown: {type: Boolean},
@@ -148,6 +156,7 @@ class GrampsjsGraph extends LitElement {
     this.scale = _zoomDefault
     this.disableBack = false
     this.disableHome = false
+    this.strings = {}
     this._svgPointerDown = false
     this._zoomInPointerDown = false
     this._zoomOutPointerDown = false
@@ -202,9 +211,61 @@ class GrampsjsGraph extends LitElement {
       <div>
         <mwc-icon-button icon="person" @click=${this._goToPerson}></mwc-icon-button>
       </div>
+      <div>
+        <mwc-icon-button icon="settings" id="btn-controls" @click=${this._openMenuControls}></mwc-icon-button>
+        <mwc-dialog
+          id="menu-controls"
+        >
+        <p>
+          <span>${this._('Max Ancestor Generations')}:
+          <b style="margin: 1em 0;">${this.nAnc}</b>
+          </span>
+          <mwc-icon-button icon="add" @click=${this._increaseNAnc} style="margin-right: -6px;"></mwc-icon-button>
+          <mwc-icon-button icon="remove" @click=${this._decreaseNAnc} ?disabled=${this.nAnc === 0}></mwc-icon-button>
+        </p>
+        <p>
+          <span>${this._('Max descendant Generations')}:
+          <b style="margin: 1em 0;">${this.nDesc}</b>
+          </span>
+          <mwc-icon-button icon="add" @click=${this._increaseNDesc} style="margin-right: -6px;"></mwc-icon-button>
+          <mwc-icon-button icon="remove" @click=${this._decreaseNDesc} ?disabled=${this.nDesc === 0}></mwc-icon-button>
+        </p>
+        <mwc-button
+          slot="primaryAction"
+          dialogAction="close"
+        >${this._('done')}</mwc-button>
+        <mwc-button
+          slot="secondaryAction"
+          @click="${this._resetLevels}"
+        >${this._('Reset')}</mwc-button>
+        </mwc-dialog>
+      </div>
       `
   }
 
+  _resetLevels () {
+    fireEvent(this, 'tree:setNAnc', {data: 3})
+    fireEvent(this, 'tree:setNDesc', {data: 1})
+  }
+
+  _increaseNAnc () {
+    fireEvent(this, 'tree:increaseNAnc')
+  }
+
+  _decreaseNAnc () {
+    fireEvent(this, 'tree:decreaseNAnc')
+  }
+
+  _increaseNDesc () {
+    fireEvent(this, 'tree:increaseNDesc')
+  }
+
+
+  _decreaseNDesc () {
+    fireEvent(this, 'tree:decreaseNDesc')
+  }
+
+
   _backToHomePerson () {
     fireEvent(this, 'tree:home')
   }
@@ -481,6 +542,10 @@ class GrampsjsGraph extends LitElement {
   _personSelected (grampsId) {
     this.dispatchEvent(new CustomEvent('pedigree:person-selected', {bubbles: true, composed: true, detail: {grampsId}}))
   }
+
+  _ (s) {
+    return translate(this.strings, s)
+  }
 }
 
 window.customElements.define('grampsjs-graph', GrampsjsGraph)
diff --git a/src/strings.js b/src/strings.js
@@ -74,6 +74,7 @@ export const grampsStrings = [
   'Description',
   'Details',
   'District',
+  'done',
   'E-mail',
   'Edit Citation',
   'Edit Event',
@@ -122,6 +123,8 @@ export const grampsStrings = [
   'Map',
   'Marriage Date',
   'Married',
+  'Max Ancestor Generations',
+  'Max descendant Generations',
   'Media Note',
   'Media Object',
   'Media Objects',
@@ -198,6 +201,7 @@ export const grampsStrings = [
   'Repository Reference Note',
   'Repository',
   'Research',
+  'Reset',
   'Role',
   'Second date',
   'Select a file',

diff --git a/src/views/GrampsjsViewGraph.js b/src/views/GrampsjsViewGraph.js
@@ -26,6 +26,8 @@ export class GrampsjsViewGraph extends GrampsjsView {
       grampsId: {type: String},
       disableBack: {type: Boolean},
       disableHome: {type: Boolean},
+      nAnc: {type: Number},
+      nDesc: {type: Number},
       _data: {type: Array},
       _graph: {type: String}
     }
@@ -35,6 +37,8 @@ export class GrampsjsViewGraph extends GrampsjsView {
     super()
     this.grampsId = ''
     this._data = []
+    this.nAnc = 3
+    this.nDesc = 1
     this.disableBack = false
     this.disableHome = false
     this._graph = ''
@@ -51,14 +55,49 @@ export class GrampsjsViewGraph extends GrampsjsView {
     <div id="outer-container">
       <grampsjs-graph
         src="${this._graph}"
+        nAnc="${this.nAnc}"
+        nDesc="${this.nDesc}"
         ?disableBack="${this.disableBack}"
         ?disableHome="${this.disableHome}"
+        .strings="${this.strings}"
+        @tree:increaseNAnc=${() => this._changeNAnc(1)}
+        @tree:decreaseNAnc=${() => this._changeNAnc(-1)}
+        @tree:increaseNDesc=${() => this._changeNDesc(1)}
+        @tree:decreaseNDesc=${() => this._changeNDesc(-1)}
+        @tree:setNAnc=${this._setNAnc}
+        @tree:setNDesc=${this._setNDesc}
       >
       </grampsjs-graph>
     </div>
   `
   }
 
+  _changeNAnc (n) {
+    if ((n === 0) || this.nAnc + n < 0) {
+      return
+    }
+    this.nAnc += n
+    this._fetchData(this.grampsId)
+  }
+
+  _setNAnc (event) {
+    this.nAnc = event.detail.data
+    this._fetchData(this.grampsId)
+  }
+
+  _changeNDesc (n) {
+    if ((n === 0) || this.nDesc + n < 0) {
+      return
+    }
+    this.nDesc += n
+    this._fetchData(this.grampsId)
+  }
+
+  _setNDesc (event) {
+    this.nDesc = event.detail.data
+    this._fetchData(this.grampsId)
+  }
+
   _goToPerson () {
     fireEvent(this, 'nav', {path: `person/${this.grampsId}`})
   }
@@ -80,8 +119,8 @@ export class GrampsjsViewGraph extends GrampsjsView {
       paperml: '0',
       papermr: '0',
       pid: grampsId,
-      maxascend: '4',
-      maxdescend: '1',
+      maxascend: `${this.nAnc}`,
+      maxdescend: `${this.nDesc}`,
       color: 'colored',
       colormales: '#64B5F6',
       colorfemales: '#EF9A9A',