From 67b0d2aa9d4cb66a112ddeb7a7caf94b096e93f0 Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Mon, 13 Apr 2020 10:22:07 +0800 Subject: [PATCH] feat: add virtual scoller for render --- package.json | 1 + .../src/lib/ledge-render.component.html | 11 ++++++-- .../src/lib/ledge-render.component.scss | 9 +++++++ .../src/lib/ledge-render.component.ts | 3 +++ .../src/lib/ledge-render.module.ts | 2 ++ .../ledge-helper/ledge-helper.component.html | 2 +- yarn.lock | 26 ++++++++++++++++--- 7 files changed, 47 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 53cba1b2..2039a6d1 100644 --- 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 index 44d5dc98..929f984e 100644 --- a/projects/ledge-render/src/lib/ledge-render.component.html +++ b/projects/ledge-render/src/lib/ledge-render.component.html @@ -1,10 +1,17 @@ -
+
-
+
+ +
+ +
+ +
+
diff --git a/projects/ledge-render/src/lib/ledge-render.component.scss b/projects/ledge-render/src/lib/ledge-render.component.scss index 704ff65b..0621f6a9 100644 --- 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 index fa95d613..cb3f158c 100644 --- 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 index 56e4ba47..02978d27 100644 --- 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 index 1334177d..95d446e1 100644 --- a/src/app/presentation/ledge-helper/ledge-helper.component.html +++ b/src/app/presentation/ledge-helper/ledge-helper.component.html @@ -2,5 +2,5 @@
- +
diff --git a/yarn.lock b/yarn.lock index d674ffdd..62d7c516 100644 --- 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/tween.js@17.4.0": + 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/tween.js@17.2.0": + 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"