From ea6df01bfde2d755caa547136def79c264051911 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 7 Feb 2016 16:11:15 +0200 Subject: [PATCH] Cache same schema views --- lib/components/JsonSchema/json-schema-lazy.js | 50 ++++++++++++++++++- lib/components/JsonSchema/json-schema.js | 11 +++- lib/components/JsonSchema/json-schema.scss | 3 ++ lib/components/ParamsList/params-list.html | 4 +- lib/components/ParamsList/params-list.js | 3 +- lib/components/Redoc/redoc.js | 6 +-- 6 files changed, 66 insertions(+), 11 deletions(-) diff --git a/lib/components/JsonSchema/json-schema-lazy.js b/lib/components/JsonSchema/json-schema-lazy.js index dddfb83b..bda6261e 100644 --- a/lib/components/JsonSchema/json-schema-lazy.js +++ b/lib/components/JsonSchema/json-schema-lazy.js @@ -5,10 +5,15 @@ import {CORE_DIRECTIVES} from 'angular2/common'; import JsonSchema from './json-schema'; import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader'; import OptionsManager from '../../options'; +import SchemaManager from '../../utils/SchemaManager'; + + +var cache = {}; + @Component({ selector: 'json-schema-lazy', - inputs: ['pointer'] + inputs: ['pointer', 'auto'] }) @View({ template: '', @@ -21,6 +26,11 @@ export default class JsonSchemaLazy { this.dcl = dcl; } + normalizePointer() { + let schema = SchemaManager.instance().byPointer(this.pointer); + return schema && schema.$ref || this.pointer; + } + load() { if (OptionsManager.instance().options.disableLazySchemas) return; if (this.loaded) return; @@ -31,5 +41,43 @@ export default class JsonSchemaLazy { } this.loaded = true; } + + // cache JsonSchema view + loadCached() { + this.pointer = this.normalizePointer(this.pointer); + if (cache[this.pointer]) { + cache[this.pointer].then((compRef) => { + setTimeout( ()=> { + let element = compRef.location.nativeElement; + + // skip caching view with discriminator as it needs attached controller + if (element.querySelector('.discriminator')) { + this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => { + compRef.instance.pointer = this.pointer; + compRef.hostView.changeDetectorRef.markForCheck(); + }); + return; + } + insertAfter(element.cloneNode(true), this.elementRef.nativeElement); + } ); + }); + } else { + cache[this.pointer] = this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => { + compRef.instance.pointer = this.pointer; + compRef.hostView.changeDetectorRef.markForCheck(); + return compRef; + }); + } + } + + ngAfterViewInit() { + if (!this.auto) return; + this.loadCached(); + } } + +function insertAfter(newNode, referenceNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); +} + JsonSchemaLazy.parameters = [[ElementRef], [DynamicComponentLoader]]; diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js index 1128f072..579bb7f4 100644 --- a/lib/components/JsonSchema/json-schema.js +++ b/lib/components/JsonSchema/json-schema.js @@ -87,7 +87,7 @@ export default class JsonSchema extends BaseComponent { adjustNameColumnWidth() { // TODO handle internal schemes differently let names = [].slice.call(this.element.querySelectorAll('.param-name-content')); - let widths = names.map(el => el.offsetWidth); + let widths = [144];//names.map(el => el.offsetWidth); let maxWidth = Math.max(...widths); if (!maxWidth) return; names.forEach(el => { @@ -142,7 +142,14 @@ export default class JsonSchema extends BaseComponent { } ngAfterViewInit() { - this.adjustNameColumnWidth(); + // adjust widht only on parent level + let el = this.element.parentElement; + while(el.tagName !== 'JSON-SCHEMA' && el.tagName !== 'REDOC') { + el = el.parentElement; + } + if (el.tagName === 'REDOC' ) { + this.adjustNameColumnWidth(); + } } } JsonSchema.parameters = JsonSchema.parameters.concat([[ElementRef]]); diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss index a8793f9e..01d4ca51 100644 --- a/lib/components/JsonSchema/json-schema.scss +++ b/lib/components/JsonSchema/json-schema.scss @@ -3,6 +3,9 @@ /* styles for array-schema for array */ $array-marker-font-sz: 12px; $array-marker-line-height: 1.5; +:host { + display: block; +} .params-wrap.params-array:before, .params-wrap.params-array:after { display: block; diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html index 2a51db6a..e4583e9a 100644 --- a/lib/components/ParamsList/params-list.html +++ b/lib/components/ParamsList/params-list.html @@ -23,7 +23,7 @@
- - + +
diff --git a/lib/components/ParamsList/params-list.js b/lib/components/ParamsList/params-list.js index 13233e5f..d027db7c 100644 --- a/lib/components/ParamsList/params-list.js +++ b/lib/components/ParamsList/params-list.js @@ -2,12 +2,13 @@ import {RedocComponent, BaseComponent} from '../base'; import JsonSchema from '../JsonSchema/json-schema'; +import JsonSchemaLazy from '../JsonSchema/json-schema-lazy'; @RedocComponent({ selector: 'params-list', templateUrl: './lib/components/ParamsList/params-list.html', styleUrls: ['./lib/components/ParamsList/params-list.css'], - directives: [JsonSchema] + directives: [JsonSchema, JsonSchemaLazy] }) export default class ParamsList extends BaseComponent { constructor(schemaMgr) { diff --git a/lib/components/Redoc/redoc.js b/lib/components/Redoc/redoc.js index 77b3bf8f..2a000ca1 100644 --- a/lib/components/Redoc/redoc.js +++ b/lib/components/Redoc/redoc.js @@ -148,7 +148,7 @@ export default class Redoc extends BaseComponent { (appRef) => { Redoc.hideLoadingAnimation(); Redoc.appRef = appRef; - redocEvents.bootstrapped.next(); + setTimeout(() => redocEvents.bootstrapped.next()); console.log('ReDoc bootstrapped!'); }, error => { @@ -193,7 +193,3 @@ export default class Redoc extends BaseComponent { } } Redoc.parameters = Redoc.parameters.concat([[OptionsManager], [ElementRef], [BrowserDomAdapter]]); - -// TODO -// this doesn't work in side-menu.js because of some circular references issue -SideMenu.parameters = SideMenu.parameters.concat([[Redoc]]);