Merge pull request evt-project#103 from evt-project/feature/line-groups

Feature/line groups

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated to Angular 9
 
 ### Added
+- Verses group visualization
 - Multiple line words normalization in interpretative and critical edition
 - Word visualization
 - Incurable corruptions visualization

src/app/app.module.ts

@@ -53,6 +53,7 @@ import { SuppliedComponent } from './components/supplied/supplied.component';
 import { SurplusComponent } from './components/surplus/surplus.component';
 import { TextComponent } from './components/text/text.component';
 import { VerseComponent } from './components/verse/verse.component';
+import { VersesGroupComponent } from './components/verses-group/verses-group.component';
 import { WordComponent } from './components/word/word.component';
 import { EditorialConventionLayoutDirective } from './directives/editorial-convention-layout.directive';
 import { HighlightDirective } from './directives/highlight.directive';
@@ -147,6 +148,7 @@ export function initializeApp(appConfig: AppConfig) {
     TextTextComponent,
     TextVersionsComponent,
     VerseComponent,
+    VersesGroupComponent,
     VersionPanelComponent,
     WitnessPanelComponent,
     WordComponent,

src/app/components/verses-group/verses-group.component.html

@@ -0,0 +1,7 @@
+<span class="verses-group {{data.class}} {{data.groupType}}" [evtHtmlAttributes]="data.attributes" 
+	[class.display-block]="displayBlock$ | async">
+	<span class="verses-group-num">{{data.n}}</span>
+	<evt-content-viewer *ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" 
+		[itemsToHighlight]="itemsToHighlight" [evtHighlight]="highlightData">
+	</evt-content-viewer>
+</span>

src/app/components/verses-group/verses-group.component.scss

@@ -0,0 +1,33 @@
+@import "../../../assets/scss/colors";
+@import "../../../assets/scss/themes";
+
+.verses-group {
+    .verses-group-num {
+        display: none;
+    }
+    &.display-block {
+        margin-bottom: 1.3rem;
+        display: block;
+
+        .verses-group-num {
+            background: none;
+            border: none;
+            margin-right: 5px;
+            display: inline-flex;
+            vertical-align: middle;
+            justify-content: center;
+            align-items: center;
+
+            min-width: 16px;
+            height: 16px;
+            padding: 1px;
+            text-align: center;
+
+            font-size: 0.7em;
+            line-height: 1.4em;
+            @include themify($themes) {
+                color: themed("secondaryColorDark");
+            }
+        }
+    }
+}

src/app/components/verses-group/verses-group.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VersesGroupComponent } from './verses-group.component';
+
+describe('VersesGroupComponent', () => {
+  let component: VersesGroupComponent;
+  let fixture: ComponentFixture<VersesGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VersesGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VersesGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/verses-group/verses-group.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { map } from 'rxjs/operators';
+
+import { VersesGroup } from '../../models/evt-models';
+import { register } from '../../services/component-register.service';
+import { EVTModelService } from '../../services/evt-model.service';
+import { EditionlevelSusceptible, Highlightable } from '../components-mixins';
+
+export interface VersesGroupComponent extends EditionlevelSusceptible, Highlightable { }
+
+@Component({
+  selector: 'evt-verses-group',
+  templateUrl: './verses-group.component.html',
+  styleUrls: ['./verses-group.component.scss'],
+})
+@register(VersesGroup)
+export class VersesGroupComponent {
+  @Input() data: VersesGroup;
+
+  get displayBlock$() {
+    return this.evtModelService.lines$.pipe(
+      map(lines => lines.length > 0),
+      map(hasLines => {
+        // In diplomatic and interpretative edition, if the text doesn't have any line, verses group are shown as block items
+        // In critical edition verses are always shown as block items
+        switch (this.editionLevel) {
+          case 'diplomatic':
+          case 'interpretative':
+            return !hasLines;
+          case 'critical':
+            return true;
+        }
+      }),
+    );
+  }
+
+  constructor(
+    private evtModelService: EVTModelService,
+  ) {
+  }
+
+}

src/app/models/evt-models.ts

@@ -283,6 +283,11 @@ export class Verse extends GenericElement {
     n: string;
 }
 
+export class VersesGroup extends GenericElement {
+    n: string;
+    groupType: string;
+}
+
 export class Supplied extends GenericElement {
     reason?: string;
     source?: string;

src/app/services/xml-parsers/basic-parsers.ts

@@ -1,7 +1,7 @@
 import { AttributesMap } from 'ng-dynamic-component';
 import {
     Addition, Attributes, Damage, Gap, GenericElement, Lb, Note, NoteLayout,
-    Paragraph, PlacementType, Supplied, Text, Verse, Word, XMLElement,
+    Paragraph, PlacementType, Supplied, Text, Verse, VersesGroup, Word, XMLElement,
 } from '../../models/evt-models';
 import { isNestedInElem, xpath } from '../../utils/dom-utils';
 import { replaceMultispaces } from '../../utils/xml-utils';
@@ -148,6 +148,23 @@ export class VerseParser extends EmptyParser implements Parser<XMLElement> {
     }
 }
 
+export class VersesGroupParser extends EmptyParser implements Parser<XMLElement> {
+    attributeParser = createParser(AttributeParser, this.genericParse);
+    parse(xml: XMLElement): VersesGroup {
+        const attributes = this.attributeParser.parse(xml);
+        const lgComponent: VersesGroup = {
+            type: VersesGroup,
+            class: getClass(xml),
+            content: parseChildren(xml, this.genericParse),
+            attributes,
+            n: getDefaultN(attributes.n),
+            groupType: getDefaultN(attributes.type),
+        };
+
+        return lgComponent;
+    }
+}
+
 export class SuppliedParser extends EmptyParser implements Parser<XMLElement> {
     attributeParser = createParser(AttributeParser, this.genericParse);
     parse(xml: XMLElement): Supplied {

src/app/services/xml-parsers/index.ts

@@ -2,7 +2,7 @@ import { Comment, GenericElement, HTML, XMLElement } from '../../models/evt-mode
 import { AppParser, RdgParser } from './app-parser';
 import {
     AdditionParser, DamageParser, ElementParser, GapParser, LBParser, NoteParser, ParagraphParser,
-    PtrParser, SuppliedParser, TextParser, VerseParser, WordParser,
+    PtrParser, SuppliedParser, TextParser, VerseParser, VersesGroupParser, WordParser,
 } from './basic-parsers';
 import { CharParser, GlyphParser, GParser } from './character-declarations-parser';
 import { ChoiceParser } from './choice-parser';
@@ -15,7 +15,7 @@ import {
 import { createParser, Parser, ParseResult } from './parser-models';
 
 type SupportedTagNames = 'add' | 'app' | 'char' | 'choice' | 'damage' | 'event' | 'g' | 'gap' | 'geogname' | 'glyph' | 'graphic' | 'l' | 'lb' |
-    'lem' | 'note' | 'orgname' | 'p' | 'persname' | 'placename' | 'ptr' | 'person' | 'personGrp' | 'place' | 'org' | 'rdg' | 'sic' | 'surface' |
+    'lem' | 'lg' | 'note' | 'orgname' | 'p' | 'persname' | 'placename' | 'ptr' | 'person' | 'personGrp' | 'place' | 'org' | 'rdg' | 'sic' | 'surface' |
     'supplied' | 'surplus' | 'w' | 'zone';
 
 export const parseF: { [T in SupportedTagNames]: Parser<XMLElement> } = {
@@ -32,6 +32,7 @@ export const parseF: { [T in SupportedTagNames]: Parser<XMLElement> } = {
     graphic: createParser(GraphicParser, parse),
     l: createParser(VerseParser, parse),
     lb: createParser(LBParser, parse),
+    lg: createParser(VersesGroupParser, parse),
     lem: createParser(RdgParser, parse),
     note: createParser(NoteParser, parse),
     org: createParser(OrganizationParser, parse),