feat: add virtual scoller for render

phodal · Apr 13, 2020 · 67b0d2a · 67b0d2a
1 parent 47e0ba5
commit 67b0d2a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "mermaid": "^8.4.8",
     "ng2-dragula": "^2.1.1",
     "ngx-markdown": "^9.0.0",
+    "ngx-virtual-scroller": "^4.0.3",
     "rxjs": "~6.5.4",
     "shortid": "^2.2.15",
     "tslib": "^1.10.0",

diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -1,10 +1,17 @@
-<div class="ledge-render">
+<div class="ledge-render" *ngIf="!virtualScroll">
   <div *ngFor="let item of markdownData" class="markdown render-item">
     <ng-template *ngTemplateOutlet="renderItem; context: {$implicit: item}"></ng-template>
-
   </div>
 </div>
 
+<div class="ledge-render" *ngIf="virtualScroll">
+  <virtual-scroller #scroll [items]="markdownData">
+    <div *ngFor="let item of scroll.viewPortItems" class="markdown render-item">
+      <ng-template *ngTemplateOutlet="renderItem; context: {$implicit: item}"></ng-template>
+    </div>
+  </virtual-scroller>
+</div>
+
 <ng-template #renderItem let-item>
   <ng-container [ngSwitch]="item.type">
     <div *ngSwitchCase="'chart'">

diff --git a/projects/ledge-render/src/lib/ledge-render.component.scss b/projects/ledge-render/src/lib/ledge-render.component.scss
@@ -1,5 +1,14 @@
 .ledge-render {
   width: 100%;
+
+  virtual-scroller {
+    width: 100%;
+    height: calc(100vh - 66px);
+
+    .render-item {
+      display: block;
+    }
+  }
 }
 
 .render-item {

diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -23,6 +23,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
 
   @Input()
   content: string;
+  @Input()
+  virtualScroll: false;
+
   markdownData: any[] = [];
   token = null;
   tokens: TokensList | any = [];

diff --git a/projects/ledge-render/src/lib/ledge-render.module.ts b/projects/ledge-render/src/lib/ledge-render.module.ts
@@ -16,6 +16,7 @@ import { LedgeCardComponent } from './components/ledge-card/ledge-card.component
 import { LedgeTableStepComponent } from './components/ledge-table-step/ledge-table-step.component';
 import { LedgePieComponent } from './chart/ledge-pie/ledge-pie.component';
 import { LedgeDevProcessComponent } from './components/ledge-dev-process/ledge-dev-process.component';
+import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 
 const LedgeComponents = [
   LedgeRenderComponent,
@@ -42,6 +43,7 @@ const LedgeComponents = [
     CommonModule,
     FormsModule,
     CustomMaterialModule,
+    VirtualScrollerModule,
   ],
   exports: [
     LedgeRenderComponent]

diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.html b/src/app/presentation/ledge-helper/ledge-helper.component.html
@@ -2,5 +2,5 @@
   <div class="source">
     <textarea matInput cols="25" [ngModel]="content" (ngModelChange)="changeContent($event)"></textarea>
   </div>
-  <ledge-render class="sample" [content]="content"></ledge-render>
+  <ledge-render class="sample" [content]="content" virtualScroll="true"></ledge-render>
 </div>
diff --git a/yarn.lock b/yarn.lock
@@ -1253,10 +1253,10 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@ledge-framework/render@~0.0.11":
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/@ledge-framework/render/-/render-0.0.11.tgz#a09eed6d4f2961b067f2926d502ff2bf051e1fdf"
-  integrity sha512-nK74xI9Urg3wVbJFLgVw+M8UoOGlgElQ2l4VSKYeC69VOCai/5VRCEzTM4er4inTvO7mSFv2Qrx6utI4Vvg1Vg==
+"@ledge-framework/render@~0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@ledge-framework/render/-/render-0.0.12.tgz#3b4468d694cf99a8f2be1fc4bebd4254b8026e64"
+  integrity sha512-TuLRySWh7O29bfWdCCIyqDc4yAaCwhjM9lms5DsKzXP8SQdZQVuXYeRc3k8HNlYrOcNZieRzPdxPylCQkuV9bg==
 
 "@marionebl/sander@^0.6.0":
   version "0.6.1"
@@ -1457,6 +1457,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tweenjs/[email protected]":
+  version "17.4.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-17.4.0.tgz#2e9ab3f2111906b30dfe1ef3259a9781dd211d35"
+  integrity sha512-J3fzl1F6wvh8KXVVcIuHN12xi1ZDcPA/0Vix+ZcJYwZWVHUwfIqfvzYXXEw7ybeev6477KCTt9fKydU+ajUqcg==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1822,6 +1827,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.0.tgz#fef1904e4668b6e5ecee60c52cc6a078ffa6697d"
   integrity sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==
 
+"@types/[email protected]":
+  version "17.2.0"
+  resolved "https://registry.yarnpkg.com/@types/tween.js/-/tween.js-17.2.0.tgz#25f98311daecb165ab91ee2cd7f17a9b1e6cc30c"
+  integrity sha512-mOsqurEtFEzwgkVc/jDVE2XrjZBYTbrmDUyCr9GXmnfc6q5otokxFtKvSY/B21zgz9LVRIvRTawKczjKi57wrA==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -8409,6 +8419,14 @@ ngx-markdown@^9.0.0:
     marked "^0.8.0"
     prismjs "^1.16.0"
 
+ngx-virtual-scroller@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/ngx-virtual-scroller/-/ngx-virtual-scroller-4.0.3.tgz#2d2ce26dbdbfd89507cca7f58c5e4e9cc1285f48"
+  integrity sha512-JBqUJ/f7GRCZDnI/JeiFoTmYR8rC/Hyv8L5I7ImePM6f/hwiFNRsrK8Abdd0E3TwklwgmZAK875te9XQJrgsyQ==
+  dependencies:
+    "@tweenjs/tween.js" "17.4.0"
+    "@types/tween.js" "17.2.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"