diff --git a/package.json b/package.json
index 70aef493c61eba8bb3056b2b1a577f27dd0dee9e..56fd60bec8540f7e7062790a3d27718b87759bc1 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
"scripts": {
"dev-server-export": "webpack-dev-server --config webpack.export.js",
"build-export": "webpack --config webpack.export.js",
+ "build-export-min": "webpack --config webpack.export.min.js",
+ "build-export-aot": "webpack --config webpack.export.aot.js",
"build-aot": "webpack --config webpack.aot.js",
"build-min": "webpack --config webpack.prod.js",
"build": "webpack --config webpack.dev.js",
diff --git a/src/atlasViewerExports/export.html b/src/atlasViewerExports/export.html
index 88c7be9425f243a067464fa8542c58a8f6b61ef6..b4a41a088e065668815706796260dc8f76e1faf9 100644
--- a/src/atlasViewerExports/export.html
+++ b/src/atlasViewerExports/export.html
@@ -39,7 +39,10 @@ tree.setAttribute('input-item',JSON.stringify(inputItem))
`
const treeSampleBox = document.getElementById('tree-element-sample-box')
treeSampleBox.setAttribute('script-input',script)
- eval(script);
+ eval(script)
+
+ const tree2 = document.getElementById('tree-element')
+ tree2.addEventListener('mouseclicktree',(ev)=>console.warn(ev))
const markdownIncludeString = `
You will also need \`bootstrap 3.3.7\` for formatting and \`custom-elements-es5-adapter\` for es5 shim:
@@ -138,7 +141,7 @@ console.log('GOTCHA')
</div>
<div class = "col-md-3">
<sample-box sample-box-title = "panel component">
-<panel-element body-collapsable = "true" show-footer = "true">
+<panel-element collapse-body = "false" body-collapsable = "true" show-body = "true" show-footer = "true" iv-parse-attribute>
<div style = "padding: 0.5em;" heading>
panel heading
</div>
@@ -153,7 +156,7 @@ console.log('GOTCHA')
</div>
<div class = "col-md-3">
<sample-box sample-box-title = "tree component" id = "tree-element-sample-box">
-<tree-element id = 'tree-element'>
+<tree-element children-expanded = "true" id = 'tree-element' treebase>
</tree-element>
</sample-box>
diff --git a/src/atlasViewerExports/export.module.ts b/src/atlasViewerExports/export.module.ts
index d17b61f71594e5f56b5bdcacda4a7a2ecf160c9d..2952924ea15241874fb4de01162f70ac5ed46356 100644
--- a/src/atlasViewerExports/export.module.ts
+++ b/src/atlasViewerExports/export.module.ts
@@ -12,25 +12,23 @@ import { PanelComponent } from "../components/panel/panel.component";
import { HoverableBlockDirective } from "../components/hoverableBlock.directive";
import { TreeComponent } from "../components/tree/tree.component";
import { TreeSearchPipe } from "../util/pipes/treeSearch.pipe";
+import { TreeBaseDirective } from "../components/tree/treeBase.directive";
+import { ParseAttributeDirective } from "../components/parseAttribute.directive";
+import { ComponentsModule } from "../components/components.module";
@NgModule({
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
+ ComponentsModule,
BsDropdownModule.forRoot()
],
declarations : [
SampleBoxUnit,
- ReadmoreComponent,
- MarkdownDom,
- PanelComponent,
- TreeComponent,
-
- SafeHtmlPipe,
- HoverableBlockDirective,
- TreeSearchPipe
+ /* parse element attributes from string to respective datatypes */
+ ParseAttributeDirective
],
entryComponents : [
SampleBoxUnit,
diff --git a/src/atlasViewerExports/main.export.aot.ts b/src/atlasViewerExports/main.export.aot.ts
new file mode 100644
index 0000000000000000000000000000000000000000..754ac3bdb49ee76b3fd29cf2e91c1f04c361b864
--- /dev/null
+++ b/src/atlasViewerExports/main.export.aot.ts
@@ -0,0 +1,6 @@
+import 'zone.js'
+
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { ExportModule } from "./export.module";
+
+platformBrowserDynamic().bootstrapModule(ExportModule)
\ No newline at end of file
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index d85c8b202e5f2a1624fd7870f9cbe47dfaa6d408..0ce465df006813d146a22131c97c99e925bdc8f6 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -5,7 +5,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { MarkdownDom } from './markdown/markdown.component';
-import { ComponentsExample } from './componentsExample/componentsExample.component';
import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
import { ReadmoreComponent } from './readmoore/readmore.component';
@@ -18,6 +17,8 @@ import { PaginationComponent } from './pagination/pagination.component';
import { SearchResultPaginationPipe } from '../util/pipes/pagination.pipe';
import { ToastComponent } from './toast/toast.component';
import { TreeSearchPipe } from '../util/pipes/treeSearch.pipe';
+import { TreeBaseDirective } from './tree/treeBase.directive';
+
@NgModule({
imports : [
@@ -29,7 +30,6 @@ import { TreeSearchPipe } from '../util/pipes/treeSearch.pipe';
declarations : [
/* components */
MarkdownDom,
- ComponentsExample,
ReadmoreComponent,
DropdownComponent,
TreeComponent,
@@ -39,11 +39,12 @@ import { TreeSearchPipe } from '../util/pipes/treeSearch.pipe';
/* directive */
HoverableBlockDirective,
+ TreeBaseDirective,
/* pipes */
SafeHtmlPipe,
SearchResultPaginationPipe,
- TreeSearchPipe
+ TreeSearchPipe,
],
exports : [
BrowserAnimationsModule,
@@ -60,8 +61,7 @@ import { TreeSearchPipe } from '../util/pipes/treeSearch.pipe';
TreeSearchPipe,
HoverableBlockDirective,
-
- ComponentsExample,
+ TreeBaseDirective,
]
})
diff --git a/src/components/componentsExample/componentsExample.component.ts b/src/components/componentsExample/componentsExample.component.ts
deleted file mode 100644
index c37f826da7fd82ab9ae2c8950f46c307d98458e6..0000000000000000000000000000000000000000
--- a/src/components/componentsExample/componentsExample.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
- selector : 'components-exmample',
- templateUrl : `./componentsExample.template.html`,
- styleUrls : [
- `./componentsExample.style.css`
- ]
-})
-
-export class ComponentsExample{
- markdownInput : string = `Heading
-------
-
-**bold**
-
-~~strikeout~~
-
-normal paragraph
-
-[google](https://www.google.com)`
-
- markdownCode :string = `
-html
-\`\`\`html
-<markdown-dom id = "markdown-dom1">
-</markdown-dom>
-\`\`\`
-javascript
-\`\`\`javascript
-const mdDom = document.getElementById('markdown-dom1')
-mdDom.markdown = \`
-MD text here
-------
-\`
-\`\`\`
-
-`
- markdownText : string = `
-mardown2Html
-======
-utilising [showdownjs](https://github.com/showdownjs/showdown). Note the [XSS vulnerability](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)).
-`
- readmoreInput : string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
- readmoreSampleCode : string = `
-
-html
-\`\`\`html
-<readmore
- collapsedHeight = 45
- show = false>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</readmore>
-\`\`\`
-`
- readmoreText : string = `
-readmore
-======
-hide/show more. Useful for the display of large block of text.
-`
-}
\ No newline at end of file
diff --git a/src/components/componentsExample/componentsExample.style.css b/src/components/componentsExample/componentsExample.style.css
deleted file mode 100644
index ab40d12a38559c97713d930ee8d1c2d5060ded87..0000000000000000000000000000000000000000
--- a/src/components/componentsExample/componentsExample.style.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.cell
-{
- max-height:20em;
-}
-
-textarea
-{
- resize:none;
- width:100%;
- height:20em;
-}
diff --git a/src/components/componentsExample/componentsExample.template.html b/src/components/componentsExample/componentsExample.template.html
deleted file mode 100644
index 2e0389ba208441aa5a49f166e0c05fbc556dfa0e..0000000000000000000000000000000000000000
--- a/src/components/componentsExample/componentsExample.template.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<div class = "container-fluid">
-
- <div class = "row">
- <div class = "col-md-12 cell">
- <markdown-dom [markdown] = "markdownText">
-
- </markdown-dom>
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-8 cell">
- try a demo:
- </div>
- <div class = "col-md-4 cell">
- code sample for implementation:
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-4 cell">
- <textarea [(ngModel)] = "markdownInput">
- </textarea>
- </div>
-
- <div class = "col-md-4 cell">
- <div class = "well">
- <markdown-dom
- [markdown]="markdownInput">
- </markdown-dom>
- </div>
- </div>
-
- <div class = "col-md-4 cell">
- <div class = "well">
- <markdown-dom
- [markdown]="markdownCode">
- </markdown-dom>
- </div>
- </div>
- </div>
-
- <div class = "row">
- <div class = "col-md-12 cell">
- <markdown-dom [markdown] = "readmoreText">
-
- </markdown-dom>
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-8 cell">
- try a demo:
- </div>
- <div class = "col-md-4 cell">
- code sample for implementation:
- </div>
- </div>
- <div class = "row">
- <div class = "col-md-4 cell">
- <textarea [(ngModel)] = "readmoreInput">
-
- </textarea>
- </div>
- <div class = "col-md-4 cell">
-
- <readmore>
- {{ readmoreInput }}
- </readmore>
- </div>
- <div class = "col-md-4 cell">
- <div class = "well">
-
- <markdown-dom [markdown] = "readmoreSampleCode">
-
- </markdown-dom>
- </div>
- </div>
- </div>
- </div>
\ No newline at end of file
diff --git a/src/components/panel/panel.component.ts b/src/components/panel/panel.component.ts
index e030dc5bc2fd77b61f58f49f3b8916a0054cd559..3889895484a61494618f6912b619de0a42f0ceab 100644
--- a/src/components/panel/panel.component.ts
+++ b/src/components/panel/panel.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, ViewChild, ElementRef, AfterContentChecked } from "@angular/core";
+import { Component, Input, ViewChild, ElementRef, AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, SimpleChanges, HostBinding, ApplicationRef } from "@angular/core";
import { panelAnimations } from "./panel.animation";
+import { ParseAttributeDirective } from "../parseAttribute.directive";
@Component({
selector : 'panel',
@@ -9,10 +10,11 @@ import { panelAnimations } from "./panel.animation";
],
animations : [
panelAnimations
- ]
+ ],
+ changeDetection:ChangeDetectionStrategy.OnPush
})
-export class PanelComponent implements AfterContentChecked{
+export class PanelComponent extends ParseAttributeDirective implements AfterContentChecked{
@Input() showHeading : boolean = true
@Input() showBody : boolean = true
@@ -28,9 +30,14 @@ export class PanelComponent implements AfterContentChecked{
_fullHeight : number = 0
+ constructor(private cdr:ChangeDetectorRef){
+ super()
+ }
+
ngAfterContentChecked(){
this.fullHeight = (this.efPanelBody ? this.efPanelBody.nativeElement.offsetHeight : 0) +
(this.efPanelFooter ? this.efPanelFooter.nativeElement.offsetHeight : 0)
+ this.cdr.detectChanges()
}
set fullHeight(num:number){
@@ -45,10 +52,10 @@ export class PanelComponent implements AfterContentChecked{
if(this.bodyCollapsable){
this.collapseBody = !this.collapseBody
- this.fullHeight = (this.efPanelBody ? this.efPanelBody.nativeElement.offsetHeight : 0) +
- (this.efPanelFooter ? this.efPanelFooter.nativeElement.offsetHeight : 0)
+ // this.fullHeight = (this.efPanelBody ? this.efPanelBody.nativeElement.offsetHeight : 0) +
+ // (this.efPanelFooter ? this.efPanelFooter.nativeElement.offsetHeight : 0)
}
event.stopPropagation()
event.preventDefault()
}
-}
\ No newline at end of file
+}
diff --git a/src/components/panel/panel.template.html b/src/components/panel/panel.template.html
index c6bab147f33e58c9f499fc8ad8e34489e1d3b31f..bbdf5f62be8390be008526ce72bbc7294dd86bb8 100644
--- a/src/components/panel/panel.template.html
+++ b/src/components/panel/panel.template.html
@@ -10,7 +10,8 @@
</ng-content>
</div>
- <div bodyFooterContainer>
+ <div
+ bodyFooterContainer>
<div
*ngIf = "showBody"
class = "panel-body"
diff --git a/src/components/parseAttribute.directive.ts b/src/components/parseAttribute.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2576867230924828a9d1bda0d0ef105ab3b56a1b
--- /dev/null
+++ b/src/components/parseAttribute.directive.ts
@@ -0,0 +1,71 @@
+import { Directive, OnChanges, SimpleChanges } from "@angular/core";
+
+function parseAttribute(arg:any,expectedType:string){
+
+ // if(
+ // typeof arg === expectedType ||
+ // arg === undefined ||
+ // arg === null
+ // ){
+ // return arg
+ // }
+ // switch (expectedType){
+ // case 'object':
+ // try{
+ // const json = JSON.parse(arg)
+ // return json
+ // }catch(e){
+ // console.warn('parseAttribute error, cannot JSON.parse object')
+ // return arg
+ // }
+ // case 'boolean' :
+ // return arg === 'true'
+ // case 'number':
+ // return isNaN(arg) ? 0 : Number(arg)
+
+ // case 'string':
+ // default :
+ // return arg
+ // }
+
+ /* return if empty string */
+ if(
+ arg === '' ||
+ arg === undefined ||
+ arg === null
+ )
+ return arg
+
+ if(!isNaN(arg)){
+ return Number(arg)
+ }
+
+ if(arg === 'true')
+ return true
+
+ if(arg === 'false')
+ return false
+
+ try{
+ const json = JSON.parse(arg)
+ return json
+ }catch(e){
+ // console.warn('parseAttribute, parse JSON, not a json')
+ /* not a json, continue */
+ /* probably print in debug mode */
+ }
+
+ return arg
+}
+
+@Directive({
+ selector : '[ivparseattribute]',
+})
+
+export class ParseAttributeDirective implements OnChanges{
+ ngOnChanges(simpleChanges:SimpleChanges){
+ Object.keys(simpleChanges).forEach(key=>{
+ this[key] = parseAttribute(simpleChanges[key].currentValue,typeof simpleChanges[key].previousValue)
+ })
+ }
+}
diff --git a/src/atlasViewer/widgetUnit/widgetDirective.directive.ts b/src/components/parseAttribute.ts
similarity index 100%
rename from src/atlasViewer/widgetUnit/widgetDirective.directive.ts
rename to src/components/parseAttribute.ts
diff --git a/src/components/tree/tree.animation.ts b/src/components/tree/tree.animation.ts
index b346e34b6b21c20b81a0e81965227f72f2d81a06..9cb6afa3cc7eb823246b30588c54b9c05ceafedb 100644
--- a/src/components/tree/tree.animation.ts
+++ b/src/components/tree/tree.animation.ts
@@ -4,13 +4,13 @@ import { trigger, state, style, transition, animate } from "@angular/animations"
export const treeAnimations = trigger('collapseState',[
state('collapsed',
style({
- 'margin-top' : '-{{ fullHeight }}px'
+ 'margin-top' : '-{{ fullHeight }}px',
}),
- { params : { fullHeight : 9999 } }
+ { params : { fullHeight : 0 } }
),
state('visible',
style({
- 'margin-top' : '0px'
+ 'margin-top' : '0px',
}),
{ params : { fullHeight : 0 } }
),
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 3c19da127550e451890e0bca6e61d86b49d0d1a2..4928c29c562920289c381a0eb5a76808a2523b2b 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -1,5 +1,8 @@
-import { Component, Input, Output, EventEmitter, ViewChildren, QueryList, HostBinding, ChangeDetectionStrategy, OnChanges, AfterContentChecked, ViewChild, ElementRef } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ViewChildren, QueryList, HostBinding, ChangeDetectionStrategy, OnChanges, AfterContentChecked, ViewChild, ElementRef, Optional, OnInit, ChangeDetectorRef, OnDestroy } from "@angular/core";
import { treeAnimations } from "./tree.animation";
+import { TreeService } from "./treeService.service";
+import { Subscription } from "rxjs";
+import { ParseAttributeDirective } from "../parseAttribute.directive";
@Component({
@@ -14,17 +17,13 @@ import { treeAnimations } from "./tree.animation";
changeDetection:ChangeDetectionStrategy.OnPush
})
-export class TreeComponent implements OnChanges,AfterContentChecked{
+export class TreeComponent extends ParseAttributeDirective implements OnChanges,OnInit,OnDestroy,AfterContentChecked{
@Input() inputItem : any = {
name : 'Untitled',
children : []
}
- @Input() renderNode : (item:any)=>string = (item)=>item.name
- @Input() findChildren : (item:any)=>any[] = (item)=>item.children
@Input() childrenExpanded : boolean = true
- @Input() searchFilter : (item:any)=>boolean | null = ()=>true
-
@Output() mouseentertree : EventEmitter<any> = new EventEmitter()
@Output() mouseleavetree : EventEmitter<any> = new EventEmitter()
@Output() mouseclicktree : EventEmitter<any> = new EventEmitter()
@@ -32,16 +31,64 @@ export class TreeComponent implements OnChanges,AfterContentChecked{
@ViewChildren(TreeComponent) treeChildren : QueryList<TreeComponent>
@ViewChild('childrenContainer',{ read : ElementRef }) childrenContainer : ElementRef
- ngOnChanges(){
- if(typeof this.inputItem === 'string'){
- this.inputItem = JSON.parse(this.inputItem)
+ constructor(
+ private cdr : ChangeDetectorRef,
+ @Optional() public treeService : TreeService ){
+ super()
+ }
+
+ subscriptions : Subscription[] = []
+
+ ngOnInit(){
+ if( this.treeService ){
+ this.subscriptions.push(
+ this.treeService.markForCheck.subscribe(()=>this.cdr.markForCheck())
+ )
}
}
- fullHeight : number = 100
+
+ ngOnDestroy(){
+ this.subscriptions.forEach(s=>s.unsubscribe())
+ }
+
+ _fullHeight : number = 9999
+
+ set fullHeight(num:number){
+ this._fullHeight = num
+ }
+
+ get fullHeight(){
+ return this._fullHeight
+ }
ngAfterContentChecked(){
this.fullHeight = this.childrenContainer ? this.childrenContainer.nativeElement.offsetHeight : 0
+ this.cdr.detectChanges()
+ }
+
+ mouseenter(ev:MouseEvent){
+ this.treeService.mouseenter.next({
+ inputItem : this.inputItem,
+ node : this,
+ event : ev
+ })
+ }
+
+ mouseleave(ev:MouseEvent){
+ this.treeService.mouseleave.next({
+ inputItem : this.inputItem,
+ node : this,
+ event : ev
+ })
+ }
+
+ mouseclick(ev:MouseEvent){
+ this.treeService.mouseclick.next({
+ inputItem : this.inputItem,
+ node : this,
+ event : ev
+ })
}
get chevronClass():string{
@@ -66,13 +113,43 @@ export class TreeComponent implements OnChanges,AfterContentChecked{
}
get children():any[]{
- return this.findChildren(this.inputItem)
+ return this.treeService ?
+ this.treeService.findChildren(this.inputItem) :
+ this.inputItem.children
}
@HostBinding('attr.filterHidden')
get visibilityOnFilter():boolean{
- return this.searchFilter ?
- this.searchFilter(this.inputItem) :
- false
+ return this.treeService ?
+ this.treeService.searchFilter(this.inputItem) :
+ true
+ }
+ handleMouseEnter(fullObj:any){
+
+ this.mouseentertree.emit(fullObj)
+
+ if(this.treeService){
+ this.treeService.mouseenter.next(fullObj)
+ }
}
+
+ handleMouseLeave(fullObj:any){
+
+ this.mouseleavetree.emit(fullObj)
+
+ if(this.treeService){
+ this.treeService.mouseleave.next(fullObj)
+ }
+ }
+
+ handleMouseClick(fullObj:any){
+
+ this.mouseclicktree.emit(fullObj)
+
+ if(this.treeService){
+ this.treeService.mouseclick.next(fullObj)
+ }
+ }
+
+ public defaultSearchFilter = ()=>true
}
\ No newline at end of file
diff --git a/src/components/tree/tree.template.html b/src/components/tree/tree.template.html
index 9d918d9a8227737195dab7bf7958d58db2065e17..bc4f3c0b0fa71992534ac25c23a2daa975fd40ae 100644
--- a/src/components/tree/tree.template.html
+++ b/src/components/tree/tree.template.html
@@ -8,10 +8,10 @@
glyphicon>
</i>
<span
- (mouseleave)="mouseleavetree.emit({inputItem:inputItem,node:this});handleEv($event)"
- (mouseenter)="mouseentertree.emit({inputItem:inputItem,node:this});handleEv($event)"
- (click)="mouseclicktree.emit({inputItem:inputItem,node:this});handleEv($event)"
- [innerHTML] = "renderNode(inputItem)"
+ (mouseleave)="handleMouseLeave({inputItem:inputItem,node:this});handleEv($event)"
+ (mouseenter)="handleMouseEnter({inputItem:inputItem,node:this});handleEv($event)"
+ (click)="handleMouseClick({inputItem:inputItem,node:this});handleEv($event)"
+ [innerHTML] = "treeService ? treeService.renderNode(inputItem) : inputItem.name"
itemName>
</span>
</div>
@@ -20,15 +20,9 @@
[@collapseState] = "{ value : childrenExpanded ? 'visible' : 'collapsed' , params : { fullHeight : fullHeight }}"
#childrenContainer>
<tree
- *ngFor = "let child of (findChildren(inputItem) | treeSearch : searchFilter : findChildren )"
+ *ngFor = "let child of ( treeService ? (treeService.findChildren(inputItem) | treeSearch : treeService.searchFilter : treeService.findChildren ) : inputItem.children )"
[childrenExpanded] = "childrenExpanded"
- [inputItem] = "child"
- [renderNode]="renderNode"
- [searchFilter]="searchFilter"
- [findChildren] = "findChildren"
- (mouseentertree)="mouseentertree.emit($event)"
- (mouseleavetree)="mouseleavetree.emit($event)"
- (mouseclicktree)="mouseclicktree.emit($event)">
+ [inputItem] = "child">
</tree>
</div>
diff --git a/src/components/tree/treeBase.directive.ts b/src/components/tree/treeBase.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..20869d5df68affcfa2336814ff92442773d75f24
--- /dev/null
+++ b/src/components/tree/treeBase.directive.ts
@@ -0,0 +1,54 @@
+import { Directive, Output, EventEmitter, OnDestroy, Input, OnChanges, ChangeDetectorRef } from "@angular/core";
+import { TreeService } from "./treeService.service";
+import { Subscription } from "rxjs";
+
+@Directive({
+ selector : '[treebase]',
+ host :{
+ 'style' : `
+ background-color:red
+ `
+ },
+ providers : [
+ TreeService
+ ]
+})
+
+export class TreeBaseDirective implements OnDestroy, OnChanges{
+ @Output() treeNodeClick : EventEmitter<any> = new EventEmitter()
+ @Output() treeNodeEnter : EventEmitter<any> = new EventEmitter()
+ @Output() treeNodeLeave : EventEmitter<any> = new EventEmitter()
+
+ @Input() renderNode : (item:any)=>string = (item)=>item.name
+ @Input() findChildren : (item:any)=>any[] = (item)=>item.children
+ @Input() searchFilter : (item:any)=>boolean | null = ()=>true
+
+ private subscriptions : Subscription[] = []
+
+ constructor(
+ public changeDetectorRef : ChangeDetectorRef,
+ public treeService : TreeService
+ ){
+ this.subscriptions.push(
+ this.treeService.mouseclick.subscribe((obj)=>this.treeNodeClick.emit(obj))
+ )
+ this.subscriptions.push(
+ this.treeService.mouseenter.subscribe((obj)=>this.treeNodeEnter.emit(obj))
+ )
+ this.subscriptions.push(
+ this.treeService.mouseleave.subscribe((obj)=>this.treeNodeLeave.emit(obj))
+ )
+ }
+
+ ngOnChanges(){
+ this.treeService.findChildren = this.findChildren
+ this.treeService.renderNode = this.renderNode
+ this.treeService.searchFilter = this.searchFilter
+
+ this.treeService.markForCheck.next(true)
+ }
+
+ ngOnDestroy(){
+ this.subscriptions.forEach(s=>s.unsubscribe())
+ }
+}
\ No newline at end of file
diff --git a/src/components/tree/treeService.service.ts b/src/components/tree/treeService.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dc659b94e9cc274182f2bd9c8e9a6880d91c81f4
--- /dev/null
+++ b/src/components/tree/treeService.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+import { Subject } from "rxjs";
+
+@Injectable()
+export class TreeService{
+ mouseclick : Subject<any> = new Subject()
+ mouseenter : Subject<any> = new Subject()
+ mouseleave : Subject<any> = new Subject()
+
+ findChildren : (item:any)=>any[] = (item)=>item.children
+ searchFilter : (item:any)=>boolean | null = ()=>true
+ renderNode : (item:any)=>string = (item)=>item.name
+
+ searchTerm : string = ``
+
+ markForCheck : Subject<any> = new Subject()
+}
\ No newline at end of file
diff --git a/src/layouts/mainside/mainside.template.html b/src/layouts/mainside/mainside.template.html
index 89609a3b357e34d975a3389b4a5448f30eeb1431..c4176df132183377c716c69d1af0d1805550eadf 100644
--- a/src/layouts/mainside/mainside.template.html
+++ b/src/layouts/mainside/mainside.template.html
@@ -13,7 +13,7 @@
</i>
</div>
<div
- [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWith } }"
+ [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWidth } }"
(@collapseSide.start) = "animationStart()"
(@collapseSide.done) = "animationEnd()"
sidecontent>
diff --git a/src/main.ts b/src/main.ts
index f9f13fe7c364c10d39b62645ad91e906a3c2ade4..a95e92c7132b2f26d6d80dafd916cf8d37b4326c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import { MainModule } from './main.module';
import 'chart.js/src/chart.js'
const requireAll = (r:any) => {r.keys().forEach(r)}
-requireAll(require.context('./res/ext',false, /.json$/))
+requireAll(require.context('./res/ext',false, /\.json$/))
+requireAll(require.context('./res/images',true,/\.jpg|\.png/))
platformBrowserDynamic().bootstrapModule(MainModule)
\ No newline at end of file
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 09096fe46d7c788a3715f531350b41f8d9b44b45..2ebd8d94925e67ccf8e5a152156a51b39a83f8eb 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -118,6 +118,7 @@ span.regionNotSelected,
span.regionSelected
{
cursor : default;
+ user-select: none;
}
markdown-dom pre code
diff --git a/src/ui/banner/banner.component.ts b/src/ui/banner/banner.component.ts
index 70ae80f8fcdc2786bceb77d69c73c03d167fc883..e528e6636fde1c676d52e246b94a44e9a6cb0b92 100644
--- a/src/ui/banner/banner.component.ts
+++ b/src/ui/banner/banner.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from "@angular/core";
+import { Component, OnDestroy, ChangeDetectionStrategy } from "@angular/core";
import { Store, select } from "@ngrx/store";
import { ViewerStateInterface, safeFilter, SELECT_PARCELLATION, extractLabelIdx, SELECT_REGIONS, NEWVIEWER, getLabelIndexMap, isDefined, CHANGE_NAVIGATION } from "../../services/stateStore.service";
import { Observable, Subscription, merge, Subject } from "rxjs";
@@ -10,7 +10,8 @@ import { FilterNameBySearch } from "../../util/pipes/filterNameBySearch.pipe";
templateUrl : './banner.template.html',
styleUrls : [
`./banner.style.css`
- ]
+ ],
+ changeDetection : ChangeDetectionStrategy.OnPush
})
export class AtlasBanner implements OnDestroy{
@@ -171,7 +172,9 @@ export class AtlasBanner implements OnDestroy{
private insertHighlight(name:string,searchTerm:string):string{
const regex = new RegExp(searchTerm,'gi')
- return name.replace(regex,(s)=>`<span class = "highlight">${s}</span>`)
+ return searchTerm === '' ?
+ name :
+ name.replace(regex,(s)=>`<span class = "highlight">${s}</span>`)
}
displayTreeNode(item:any){
@@ -180,11 +183,6 @@ export class AtlasBanner implements OnDestroy{
`<span class = "regionNotSelected">${this.insertHighlight(item.name,this.searchTerm)}</span>`
}
- /* TODO obsolete? */
- get treeHeaderText():string{
- return ''
- }
-
getChildren(item:any){
return item.children
}
@@ -203,4 +201,5 @@ export class AtlasBanner implements OnDestroy{
}
filterNameBySearchPipe = new FilterNameBySearch()
-}
\ No newline at end of file
+}
+
diff --git a/src/ui/banner/banner.style.css b/src/ui/banner/banner.style.css
index 30f37e29ad00037b2cd59c0e2c9d2cda3798afb8..d19243effd171fcbd4c7c394edf42ba7b9e7aaf9 100644
--- a/src/ui/banner/banner.style.css
+++ b/src/ui/banner/banner.style.css
@@ -85,4 +85,35 @@ input[type="text"]
background-color:rgba(30,30,30,0.85);
box-shadow: inset 0 4px 6px 0 rgba(0,0,0,0.2);
color:rgba(255,255,255,0.8);
+}
+
+:host-context([darktheme="true"]) [hbpLogoContainer]
+{
+ background-image:url('res/image/HBP_Primary_RGB_WhiteText.png')
+}
+
+:host-context([darktheme="false"]) [hbpLogoContainer]
+{
+ background-image:url('res/image/HBP_Primary_RGB_BlackText.png')
+}
+
+[hbpLogoContainer]
+{
+ display:inline-block;
+ background-size: cover;
+ pointer-events: none;
+ height:80px;
+}
+
+[hbpLogoContainer] > img
+{
+ visibility: hidden;
+ height:80px;
+ pointer-events: none;
+}
+
+:host
+{
+ display:flex;
+ height:0px;
}
\ No newline at end of file
diff --git a/src/ui/banner/banner.template.html b/src/ui/banner/banner.template.html
index 6b0e30b92996bfa04e4ece94d0dd737357f3211e..45af32561f06603f5bcda2db40940c7b9cdcf8a6 100644
--- a/src/ui/banner/banner.template.html
+++ b/src/ui/banner/banner.template.html
@@ -1,3 +1,7 @@
+
+<span hbpLogoContainer>
+ <img src = "res/image/HBP_Primary_RGB_WhiteText.png" />
+</span>
<div container>
<dropdown
(itemSelected) = "selectTemplate($event)"
@@ -47,10 +51,11 @@
</div>
<tree
*ngFor = "let child of (selectedParcellation.regions | treeSearch : filterTreeBySearch.bind(this) : getChildren )"
- (mouseclicktree) = "handleClickRegion($event)"
+ (treeNodeClick) = "handleClickRegion($event)"
[renderNode]="(displayTreeNode).bind(this)"
[searchFilter]="(filterTreeBySearch).bind(this)"
- [inputItem]="child">
+ [inputItem]="child"
+ treebase>
</tree>
</div>
</div>
diff --git a/src/ui/databrowser/databrowser.template.html b/src/ui/databrowser/databrowser.template.html
index 54aeec21a8c5c77a7447841475043698a723bddd..92c9353b8716e45ead0905b381c5df44d26ee442 100644
--- a/src/ui/databrowser/databrowser.template.html
+++ b/src/ui/databrowser/databrowser.template.html
@@ -122,9 +122,10 @@
<tree
*ngFor = "let item of searchResult.files | copyProperty : 'filename' : 'path' | pathToNestedChildren"
[childrenExpanded] = "false"
- [renderNode] = "renderNode"
- (mouseclicktree) = "handleTreeNodeClick($event)"
- [inputItem] = " item ">
+ [renderNode] = "renderNode"
+ (treeNodeClick) = "handleTreeNodeClick($event)"
+ [inputItem] = " item "
+ treebase>
</tree>
</div>
diff --git a/src/ui/fileviewer/fileviewer.style.css b/src/ui/fileviewer/fileviewer.style.css
index b5791c17b813a33244a86d77d71e48ce4c92a1a7..365b2318bf6123d61cc7f0e9cdc03480e8578b57 100644
--- a/src/ui/fileviewer/fileviewer.style.css
+++ b/src/ui/fileviewer/fileviewer.style.css
@@ -7,4 +7,9 @@ small#captions
div[emptyRow]
{
margin-bottom:-1em;
+}
+
+img
+{
+ width: 100%;
}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 3eb347cb30e4d80cb54ce6d024917631cdd30baf..cc6ca1b4e6cc9cf2f2434f7503b3d4540becac5e 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -3,7 +3,7 @@ import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
import { Store, select } from "@ngrx/store";
import { ViewerStateInterface, safeFilter, SELECT_REGIONS, getLabelIndexMap, DataEntry, CHANGE_NAVIGATION, isDefined, MOUSE_OVER_SEGMENT } from "../../services/stateStore.service";
import { Observable, Subscription, fromEvent, combineLatest, merge } from "rxjs";
-import { filter,map, take, scan, debounceTime, distinctUntilChanged } from "rxjs/operators";
+import { filter,map, take, scan, debounceTime, distinctUntilChanged, switchMap } from "rxjs/operators";
import * as export_nehuba from 'export_nehuba'
import { AtlasViewerAPIServices } from "../../atlasViewer/atlasViewer.apiService.service";
import { timedValues } from "../../util/generator";
@@ -144,6 +144,36 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
/* patch NG */
this.patchNG()
+
+ /* each time a new viewer is initialised, take the first event to get the translation function */
+ this.newViewer$.pipe(
+ switchMap(()=>fromEvent(this.elementRef.nativeElement,'sliceRenderEvent').pipe(
+ scan((acc:Event[],event:Event)=>{
+ const target = (event as Event).target as HTMLElement
+ const key = target.offsetLeft < 5 && target.offsetTop < 5 ?
+ 0 :
+ target.offsetLeft > 5 && target.offsetTop < 5 ?
+ 1 :
+ target.offsetLeft < 5 && target.offsetTop > 5 ?
+ 2 :
+ target.offsetLeft > 5 && target.offsetTop > 5 ?
+ 3 :
+ 4
+
+ const _ = {}
+ _[key] = event
+ return Object.assign({},acc,_)
+ },[]),
+ filter(v=>{
+ const isdefined = (obj) => typeof obj !== 'undefined' && obj !== null
+ return (isdefined(v[0]) && isdefined(v[1]) && isdefined(v[2]))
+ }),
+ take(1)
+ )
+ )
+ ).subscribe((events)=>{
+ [0,1,2].forEach(idx=>this.nanometersToOffsetPixelsFn[idx] = (events[idx] as any).detail.nanometersToOffsetPixels)
+ })
}
ngOnInit(){
@@ -222,7 +252,7 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
}
ngAfterViewInit(){
- this.getNMToOffsetPixelFn()
+
}
ngOnDestroy(){
@@ -256,34 +286,6 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
spatialData.highlight = false
}
- private getNMToOffsetPixelFn(){
-
- fromEvent(this.elementRef.nativeElement,'sliceRenderEvent').pipe(
- scan((acc:Event[],event:Event)=>{
- const target = (event as Event).target as HTMLElement
- const key = target.offsetLeft < 5 && target.offsetTop < 5 ?
- 0 :
- target.offsetLeft > 5 && target.offsetTop < 5 ?
- 1 :
- target.offsetLeft < 5 && target.offsetTop > 5 ?
- 2 :
- target.offsetLeft > 5 && target.offsetTop > 5 ?
- 3 :
- 4
-
- const _ = {}
- _[key] = event
- return Object.assign({},acc,_)
- },[]),
- filter(v=>{
- const isdefined = (obj) => typeof obj !== 'undefined' && obj !== null
- return (isdefined(v[0]) && isdefined(v[1]) && isdefined(v[2]))
- }),
- take(1)
- ).subscribe((events)=>
- [0,1,2].forEach(idx=>this.nanometersToOffsetPixelsFn[idx] = (events[idx] as any).detail.nanometersToOffsetPixels))
- }
-
private patchNG(){
const { LayerManager, UrlHashBinding } = export_nehuba.getNgPatchableObj()
@@ -359,6 +361,8 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
this.apiService.interactiveViewer.viewerHandle = null
this.viewerLoaded = true
+ if( this.cr )
+ this.cr.destroy()
this.container.clear()
this.cr = this.container.createComponent(this.nehubaViewerFactory)
this.nehubaViewer = this.cr.instance
@@ -527,7 +531,7 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
/* set this.oldnavigation to represent the state of the store */
/* animation done, set this.oldNavigation */
- this.oldNavigation = Object.assign({},dest)
+ this.oldNavigation = Object.assign({},this.oldNavigation,dest)
}
}
requestAnimationFrame(()=>animate())
@@ -649,4 +653,4 @@ export class NehubaContainer implements OnInit,OnDestroy,AfterViewInit{
export const CM_THRESHOLD = `0.05`
export const CM_MATLAB_JET = `float r;if( x < 0.7 ){r = 4.0 * x - 1.5;} else {r = -4.0 * x + 4.5;}float g;if (x < 0.5) {g = 4.0 * x - 0.5;} else {g = -4.0 * x + 3.5;}float b;if (x < 0.3) {b = 4.0 * x + 0.5;} else {b = -4.0 * x + 2.5;}float a = 1.0;`
-export const getActiveColorMapFragmentMain = ():string=>`void main(){float x = toNormalized(getDataValue());${CM_MATLAB_JET}if(x>${CM_THRESHOLD}){emitRGB(vec3(r,g,b));}else{emitTransparent();}}`
+export const getActiveColorMapFragmentMain = ():string=>`void main(){float x = toNormalized(getDataValue());${CM_MATLAB_JET}if(x>${CM_THRESHOLD}){emitRGB(vec3(r,g,b));}else{emitTransparent();}}`
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 89b48be2bdd024f41480f13406972720140813f6..671068e0bad5eb8420d03f19096e0df8470dc9a6 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -78,7 +78,8 @@
</a>
</div>
- <hr />
+ <hr
+ *ngIf = "showCitation" />
<span
class = "btn btn-link"
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
index 340949cfa0cdc9ac196a588950b2659aa0c02bc5..d47c0da23611cf5ff7b657c939af1996b980cf15 100644
--- a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
@@ -83,7 +83,9 @@ export class NehubaViewerUnit implements AfterViewInit,OnDestroy{
public mouseOverSegment : number | null
ngAfterViewInit(){
- this.nehubaViewer = export_nehuba.createNehubaViewer(this.config,console.warn)
+ this.nehubaViewer = export_nehuba.createNehubaViewer(this.config,(err)=>{
+ /* print in debug mode */
+ })
if(this.regionsLabelIndexMap){
const managedLayers = this.nehubaViewer.ngviewer.layerManager.managedLayers
diff --git a/webpack.export.aot.js b/webpack.export.aot.js
new file mode 100644
index 0000000000000000000000000000000000000000..8421c23bfbf643fbf0926c5e4d6e689d0a984200
--- /dev/null
+++ b/webpack.export.aot.js
@@ -0,0 +1,47 @@
+const common = require('./webpack.common.js')
+const path = require('path')
+const ngtools = require('@ngtools/webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const AngularCompilerPlugin = ngtools.AngularCompilerPlugin
+const ClosureCompilerPlugin = require('webpack-closure-compiler')
+
+module.exports = {
+
+ entry : './src/main-aot.ts',
+ output : {
+ filename : 'main.js',
+ path : path.resolve(__dirname,'dist/export-aot')
+ },
+ module: {
+ rules: [
+ {
+ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+ // test : /\.ts$/,
+ loader: '@ngtools/webpack',
+ exclude : /export_nehuba/
+ },
+ {
+ test : /\.(html|css)$/,
+ use : {
+ loader : 'raw-loader',
+ }
+ }
+ ]
+ },
+ plugins : [
+ new HtmlWebpackPlugin({
+ template : './src/atlasViewerExports/export.html'
+ }),
+ new AngularCompilerPlugin({
+ tsConfigPath: 'tsconfig-aot.json',
+ entryModule: 'src/atlasViewerExports/export.module#ExportModule'
+ })
+ ],
+ resolve : {
+ extensions : [
+ '.ts',
+ '.js',
+ '.json'
+ ]
+ }
+}
\ No newline at end of file
diff --git a/webpack.export.js b/webpack.export.js
index 1bb833dc1a37acf2f16642bee245f3c34ce3de70..d6cc210c905ec7c59a9a8dd123019e407e3a69c5 100644
--- a/webpack.export.js
+++ b/webpack.export.js
@@ -12,6 +12,7 @@ module.exports = merge(common,ngAssets,{
filename : 'export.js',
path : path.resolve(__dirname,'dist/export')
},
+ devtool:'source-map',
plugins : [
// new ClosureCompilerPlugin({
// compiler : {
diff --git a/webpack.export.min.js b/webpack.export.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..eff53e1cc79c6f71a3a5eb7ce80ba546cdaa02c9
--- /dev/null
+++ b/webpack.export.min.js
@@ -0,0 +1,26 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+const ngAssets = require('./webpack.ngassets')
+const path = require('path')
+const ClosureCompilerPlugin = require('webpack-closure-compiler')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = merge(common,ngAssets,{
+ entry : './src/atlasViewerExports/main.export.ts',
+ output : {
+ filename : 'export.js',
+ path : path.resolve(__dirname,'dist/export-min')
+ },
+ plugins : [
+ new ClosureCompilerPlugin({
+ compiler : {
+ compilation_level : 'SIMPLE'
+ },
+ concurrency : 4
+ }),
+
+ new HtmlWebpackPlugin({
+ template : './src/atlasViewerExports/export.html'
+ })
+ ]
+})
\ No newline at end of file
diff --git a/webpack.ngassets.js b/webpack.ngassets.js
index 79f5e00da078257049e4fcfd22bf9699a4fd671e..c9227ba432d9b36438a26cfa7a6072f1f573d063 100644
--- a/webpack.ngassets.js
+++ b/webpack.ngassets.js
@@ -2,7 +2,7 @@ module.exports = {
module : {
rules : [
{
- test : /\.(html|css)$/,
+ test : /(html|css)$/,
exclude : /export\_nehuba|index/,
use : {
loader : 'file-loader',
@@ -10,6 +10,14 @@ module.exports = {
name : '[name].[ext]'
}
}
+ },{
+ test : /(jpg|png)$/,
+ use : {
+ loader : 'file-loader',
+ options : {
+ name : 'res/image/[name].[ext]'
+ }
+ }
}
]
}
diff --git a/webpack.staticassets.js b/webpack.staticassets.js
new file mode 100644
index 0000000000000000000000000000000000000000..c123acfa2272ac4fcd6adcea3bf0fc5eddd04e78
--- /dev/null
+++ b/webpack.staticassets.js
@@ -0,0 +1,16 @@
+module.exports = {
+ module : {
+ rules : [
+ {
+ test : /jpg|png/,
+ exclude : /export\_nehuba|index/,
+ use : {
+ loader : 'file-loader',
+ options : {
+ name : '[name].[ext]'
+ }
+ }
+ }
+ ]
+ }
+}
\ No newline at end of file