Skip to content

Commit

Permalink
feat: add virtual scroll for render
Browse files Browse the repository at this point in the history
  • Loading branch information
@phodal
phodal committed Apr 3, 2020
1 parent 34c2efe commit f438da1
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 108 deletions.
3 changes: 3 additions & 0 deletions src/app/shared/custom-material.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
MAT_DIALOG_DEFAULT_OPTIONS,
MatDialogModule,
} from '@angular/material/dialog';
import { ScrollingModule } from '@angular/cdk/scrolling';

const modules = [
MatToolbarModule,
Expand All @@ -20,6 +21,8 @@ const modules = [
MatSidenavModule,
MatIconModule,
MatDialogModule,

ScrollingModule,
];

@NgModule({
Expand Down
219 changes: 111 additions & 108 deletions src/app/shared/ledge-render/ledge-render.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,146 @@
<div *ngFor="let item of markdownData" class="ledge-render markdown">
<div [ngSwitch]="item.type">
<div *ngSwitchCase="'chart'">
<ledge-bar-chart [data]="item.data"></ledge-bar-chart>
</div>
<cdk-virtual-scroll-viewport [itemSize]="markdownData.length" class="ledge-render">
<div *cdkVirtualFor="let item of markdownData" class="markdown render-item">
<div [ngSwitch]="item.type">
<div *ngSwitchCase="'chart'">
<ledge-bar-chart [data]="item.data"></ledge-bar-chart>
</div>

<div *ngSwitchCase="'mindmap'">
<ledge-mindmap [data]="item.data"></ledge-mindmap>
</div>
<div *ngSwitchCase="'mindmap'">
<ledge-mindmap [data]="item.data"></ledge-mindmap>
</div>

<div *ngSwitchCase="'pyramid'">
<ledge-pyramid [data]="item.data"></ledge-pyramid>
</div>
<div *ngSwitchCase="'pyramid'">
<ledge-pyramid [data]="item.data"></ledge-pyramid>
</div>

<div *ngSwitchCase="'radar'">
<ledge-radar [data]="item.data" [config]="item.config"></ledge-radar>
</div>
<div *ngSwitchCase="'radar'">
<ledge-radar [data]="item.data" [config]="item.config"></ledge-radar>
</div>

<div *ngSwitchCase="'quadrant'">
<ledge-quadrant [data]="item.data"></ledge-quadrant>
</div>
<div *ngSwitchCase="'quadrant'">
<ledge-quadrant [data]="item.data"></ledge-quadrant>
</div>

<div *ngSwitchCase="'toolset'">
<toolset [option]="item.data"></toolset>
</div>
<div *ngSwitchCase="'toolset'">
<toolset [option]="item.data"></toolset>
</div>

<div *ngSwitchCase="'graphviz'">
<ledge-graphviz [data]="item.data"></ledge-graphviz>
</div>
<div *ngSwitchCase="'graphviz'">
<ledge-graphviz [data]="item.data"></ledge-graphviz>
</div>

<div *ngSwitchCase="'echarts'">
<ledge-pure-echarts [data]="item.data"></ledge-pure-echarts>
</div>
<div *ngSwitchCase="'echarts'">
<ledge-pure-echarts [data]="item.data"></ledge-pure-echarts>
</div>

<div *ngSwitchCase="'table'">
<table>
<thead>
<tr>
<th *ngFor="let h of item.header">{{h}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of item.cells">
<th *ngFor="let cell of row">{{cell}}</th>
</tr>
</tbody>
</table>
</div>
<div *ngSwitchCase="'table'">
<table>
<thead>
<tr>
<th *ngFor="let h of item.header">{{h}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of item.cells">
<th *ngFor="let cell of row">{{cell}}</th>
</tr>
</tbody>
</table>
</div>

<div *ngSwitchCase="'paragraph'">
<div [innerHTML]="item.data"></div>
</div>
<div *ngSwitchCase="'paragraph'">
<div [innerHTML]="item.data"></div>
</div>

<div *ngSwitchCase="'process-step'">
<div class="markdown-process-step">
<div class="process-step-column" *ngFor="let row of item.data.children">
<div class="process-title">{{row.name}}</div>
<div class="process-body">
<div class="process-step-item" *ngFor="let cell of row.children">{{cell.name}}</div>
<div *ngSwitchCase="'process-step'">
<div class="markdown-process-step">
<div class="process-step-column" *ngFor="let row of item.data.children">
<div class="process-title">{{row.name}}</div>
<div class="process-body">
<div class="process-step-item" *ngFor="let cell of row.children">{{cell.name}}</div>
</div>
</div>
</div>
</div>
</div>

<div *ngSwitchCase="'process-table'">
<div class="process-table markdown-table">
<div class="table-container" role="table" aria-label="Destinations">
<div class="flex-table header" role="rowgroup">
<div class="flex-row cell type_{{index}}" *ngFor="let header of item.data.header;let index = index;">
{{header}}
<div *ngSwitchCase="'process-table'">
<div class="process-table markdown-table">
<div class="table-container" role="table" aria-label="Destinations">
<div class="flex-table header" role="rowgroup">
<div class="flex-row cell type_{{index}}" *ngFor="let header of item.data.header;let index = index;">
{{header}}
</div>
</div>
</div>
</div>
<div class="table-space"></div>
<div class="flex-table row">
<div class="table-column" *ngFor="let row of item.data.cells;">
<div class="cell" *ngFor="let cell of row">{{cell}}</div>
<div class="table-space"></div>
<div class="flex-table row">
<div class="table-column" *ngFor="let row of item.data.cells;">
<div class="cell" *ngFor="let cell of row">{{cell}}</div>
</div>
</div>
</div>
</div>
</div>

<div *ngSwitchCase="'list-style'">
<div class="list-style list-style-{{item.config.type}}">
<div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">
{{listItem.name}}

<ng-template #recursiveList let-list>
<div *ngFor="let item of list" class="sub-item">
<div class="list-style-item">{{item.name}}</div>
<div *ngIf="item.children && item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
<div *ngSwitchCase="'list-style'">
<div class="list-style list-style-{{item.config.type}}">
<div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">
{{listItem.name}}

<ng-template #recursiveList let-list>
<div *ngFor="let item of list" class="sub-item">
<div class="list-style-item">{{item.name}}</div>
<div *ngIf="item.children && item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</div>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: listItem.children }"></ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: listItem.children }"></ng-container>
</div>
</div>
</div>
</div>

<div *ngSwitchCase="'heading'">
<h1 *ngIf="item.depth === 1" [innerHTML]="item.text"></h1>
<h2 *ngIf="item.depth === 2" [innerHTML]="item.text"></h2>
<h3 *ngIf="item.depth === 3" [innerHTML]="item.text"></h3>
<h4 *ngIf="item.depth === 4" [innerHTML]="item.text"></h4>
<h5 *ngIf="item.depth === 5" [innerHTML]="item.text"></h5>
<h6 *ngIf="item.depth === 6" [innerHTML]="item.text"></h6>
</div>
<div *ngSwitchCase="'heading'">
<h1 *ngIf="item.depth === 1" [innerHTML]="item.text"></h1>
<h2 *ngIf="item.depth === 2" [innerHTML]="item.text"></h2>
<h3 *ngIf="item.depth === 3" [innerHTML]="item.text"></h3>
<h4 *ngIf="item.depth === 4" [innerHTML]="item.text"></h4>
<h5 *ngIf="item.depth === 5" [innerHTML]="item.text"></h5>
<h6 *ngIf="item.depth === 6" [innerHTML]="item.text"></h6>
</div>

<div *ngSwitchCase="'code'">
<div *ngSwitchCase="'code'">
<pre class="language-{{item.lang}}">
<code class="language-{{item.lang}}">{{item.text}}</code>
</pre>
</div>
</div>

<div *ngSwitchCase="'blockquote'">
<blockquote [innerHTML]="item.text"></blockquote>
</div>
<div *ngSwitchCase="'blockquote'">
<blockquote [innerHTML]="item.text"></blockquote>
</div>

<div *ngSwitchCase="'hr'">
<hr>
</div>
<div *ngSwitchCase="'hr'">
<hr>
</div>

<div *ngSwitchCase="'list'">
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" class="sub-item">
{{item.body.name}}
<ul *ngIf="item.body.children.children && item.body.children.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.body.children.children }"></ng-container>
</ul>
</li>
</ng-template>
<ul>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container>
</ul>
</div>
<div *ngSwitchCase="'list'">
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" class="sub-item">
{{item.body.name}}
<ul *ngIf="item.body.children.children && item.body.children.children.length > 0">
<ng-container
*ngTemplateOutlet="recursiveList; context:{ $implicit: item.body.children.children }"></ng-container>
</ul>
</li>
</ng-template>
<ul>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.data }"></ng-container>
</ul>
</div>


<div *ngSwitchDefault>
{{stringify(item)}}
<div *ngSwitchDefault>
{{stringify(item)}}
</div>
</div>
</div>
</div>
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
4 changes: 4 additions & 0 deletions src/app/shared/ledge-render/ledge-render.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,9 @@
min-width: 960px;
width: 100%;
margin: 4em auto 0;
height: calc(100% - 64px);
}

.render-item {
height: auto;
}
2 changes: 2 additions & 0 deletions src/app/shared/ledge-render/ledge-render.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
Input,
OnChanges,
Expand All @@ -14,6 +15,7 @@ import LedgeMarkdownConverter from '../components/model/ledge-markdown-converter
selector: 'ledge-render',
templateUrl: './ledge-render.component.html',
styleUrls: ['./ledge-render.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
constructor() {}
Expand Down

0 comments on commit f438da1

Please sign in to comment.