Page MenuHomec4science
Files F91972097

README.md
No OneTemporary
Actions

File Metadata

Created
Sat, Nov 16, 06:51

README.md
View Options

# PageViewModule
## How to use PageViewComponent
This component displays one or two images with word hovers and corresponding lines in `TextFieldComponent(s)` and `MarginFieldComponent(s)`.
On more information about this module see the documentation.
### Import Module
In your Angular module file, e.g. `app.module.ts`:
```
import { PageViewModule} from './page-view/page-view.module';
import { PageViewService } from './page-view/page-view.service';
@NgModule({
declarations: [ AppComponent ],
imports: [ PageViewModule ],
providers: [ PageViewService ],
.
.
.
```
### In your template:
```
<page-view [assignClass]="assignClass" [assignStyle]="assignStyle" [findText]="findText"
[configuration]="configuration"
[first_image]="image" [first_lines]="lines" [first_words]="words"
[first_foreign_texts]="foreignTexts" [second_foreign_texts]="second_foreignTexts"
[second_image]="second_image" [second_lines]="second_lines" [second_words]="second_words"
[selectedWords]="selectedWords" [selectedLines]="selectedLines"
[preferPrimaryUrl]="true" [zoomFactor]="zoomFactor"></page-view>
```
List of inputs:
- `assignClass`:
An OPTIONAL function that will be passed to `TextFieldComponent`
in order to return a further highlight class
to the word rects when the internal function would return 'textfield unhighlighted'
- `assignStyle`:
An OPTIONAL function that will be passed to `TextFieldComponent` and `MarginFieldComponent`
in order to return a (svg-)style object
to the word and line rects. This function allows the user to extend the style of this component.
E.g. by returning { fill: blue } the function overwrites the default behaviour and sets
the default highlight color to blue.
- `configuration`: OPTIONAL configuration in the form `{'ComponentName|*': { 'PropertyName': value }}`
- `findText`: OPTIONAL the search text of words that should be highlighted.
- `first_foreign_texts`: text by foreign hand belonging to first image
- `first_image`: the first image that will be displayed
- `first_lines`: the Array of lines of the first image that will be displayed
- `first_words`: the Array of words of the first image that will be displayed
- `max_height`: OPTIONAL the (initial) maximum height of the image(s)
- `preferPrimaryUrl`: OPTIONAL should primary Url be used for image. Use secondary Url if false. Default: true.
- `second_foreign_texts`: text by foreign hand belonging to second image
- `second_image`: OPTIONAL the second image that will be displayed
- `second_lines`: OPTIONAL the Array of lines of the second image that will be displayed
- `second_words`: OPTIONAL the Array of words of the second image that will be displayed
- `selectedWords`: OPTIONAL identifiers of selected words that should be highlighted (i.e. list of IRIs or Ids).
- `selectedLines`: OPTIONAL identifiers of selected words that should be highlighted (i.e. list of IRIs or Ids).
- `zoomFactor`: OPTIONAL global zoom factor
### For your Data
Use the interfaces from `pageView/models.ts` for your data:
```
import { externalAssignClass, externalAssignStyle, Image, PositionalObject, TextField, TextByForeignHand, Line, Word } from './page-view/models';
```
### For mouse event interaction
Use the `PageViewService` in order to react on mouse events.
Import:
```
import { PageViewService } from './page-view/page-view.service';
```
Inject service:
```
constructor(private pageViewService: PageViewService) {}
```
Subscribe to mouse events on words and lines:
```
ngOnInit() {
this.pageViewService.onClickedWord.subscribe(
(clickedWord: Word) => { this.doSomething(clickedWord); }
);
this.pageViewService.onClickedLine.subscribe(
(clickedLine: Line) => { this.doSomething(clickedLine); }
);
this.pageViewService.onHoveredWord.subscribe(
(hoveredWord: Word) => { this.doSomething(hoveredWord); }
);
this.pageViewService.onHoveredLine.subscribe(
(hoveredLine: Line) => { this.doSomething(hoveredLine); }
);
this.pageViewService.offHoveredWord.subscribe(
(unhoveredWord: Word) => { this.doSomething(unhoveredWord); }
);
this.pageViewService.offHoveredLine.subscribe(
(unhoveredLine: Line) => { this.doSomething(unhoveredLine); }
);
}
```

Event Timeline

c4science · Help