[新增]Box增加viewInit静态事件，用于监听box整体布局样式的初始化 (#722)

Author: hpyou

src/app/demo/box/demo-set.module.ts

@@ -10,6 +10,8 @@ import {BoxLayoutScrollDemoComponent} from "./scroll/demo.component";
 import {BoxLayoutScrollDemoModule} from "./scroll/demo.module";
 import {BoxMiddleResizeLineDemoComponent} from "./middle-resize-line/demo.component";
 import {BoxMiddleResizeLineDemoModule} from "./middle-resize-line/demo.module";
+import {BoxViewInitDemoComponent} from "./view-init/demo.component";
+import {BoxViewInitDemoModule} from "./view-init/demo.module";
 
 export const routerConfig = [
     {
@@ -27,6 +29,9 @@ export const routerConfig = [
     {
         path: 'middle-resize-line', component: BoxMiddleResizeLineDemoComponent
     },
+    {
+        path: 'view-init', component: BoxViewInitDemoComponent
+    },
 ];
 
 @NgModule({
@@ -36,7 +41,8 @@ export const routerConfig = [
         BoxLayoutDemoModule,
         FormDemoModule,
         BoxLayoutScrollDemoModule,
-        BoxMiddleResizeLineDemoModule
+        BoxMiddleResizeLineDemoModule,
+        BoxViewInitDemoModule
     ]
 })
 export class BoxDemoModule {

src/app/demo/box/view-init/demo.component.css

@@ -0,0 +1,4 @@
+
+j-box {
+    border: 1px solid #bbb;
+}

src/app/demo/box/view-init/demo.component.html

@@ -0,0 +1,24 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Box</h2>
+    <div class="demo-1 live-demo">
+        <h3>ViewInit事件</h3>
+        <p class="comment">ViewInit事件是box框架初始化完成，即整个布局初始化完成。有时graph会在box渲染完成之前先渲染，
+            导致graph的尺寸和box最终的尺寸不一致。这个时候可以监听box的ViewInit事件来进行resize</p>
+        <j-box height="400">
+            <j-box>
+                <jigsaw-graph [data]="lineBarData"></jigsaw-graph>
+            </j-box>
+            <j-box>
+                <jigsaw-graph [data]="lineBarData"></jigsaw-graph>
+            </j-box>
+        </j-box>
+    </div>
+</div>
+
+

src/app/demo/box/view-init/demo.component.ts

@@ -0,0 +1,42 @@
+import {Component} from "@angular/core";
+import {LineGraphData} from "../../../../jigsaw/core/data/graph-data";
+import {JigsawBox} from "../../../../jigsaw/component/box/box";
+
+@Component({
+    templateUrl: './demo.component.html',
+    styleUrls: ['./demo.component.css']
+})
+export class BoxViewInitDemoComponent {
+    lineBarData: LineGraphData;
+    constructor() {
+        this.lineBarData = new LineGraphData();
+        this.lineBarData.rowDescriptor = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+        this.lineBarData.header = ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'];
+        this.lineBarData.data = [
+            [120, 220, 150, 320, 820],
+            [132, 182, 232, 332, 932],
+            [101, 191, 201, 301, 901],
+            [134, 234, 154, 334, 934],
+            [90, 290, 190, 390, 1290],
+            [230, 330, 330, 330, 1330],
+            [210, 310, 410, 320, 1320]
+        ];
+        JigsawBox.viewInit.subscribe(() => {
+            let e = document.createEvent("Event");
+            e.initEvent("resize", true, true);
+            window.dispatchEvent(e);
+        })
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个DEMO演示了在内容溢出后，j-box在滚动条方面的行为，以及如何添加自定义滚动条';
+    description: string = '';
+    tags: string[] = [
+        'JigsawBox',
+        'PerfectScrollbarDirective'
+    ];
+}
+
+

src/app/demo/box/view-init/demo.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from "@angular/core";
+import {JigsawBoxModule} from "jigsaw/component/box/index";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {BoxViewInitDemoComponent} from "./demo.component";
+import {JigsawGraphModule} from "jigsaw/component/graph/index";
+
+@NgModule({
+    declarations: [BoxViewInitDemoComponent],
+    exports: [BoxViewInitDemoComponent],
+    imports: [JigsawDemoDescriptionModule, JigsawBoxModule, JigsawGraphModule]
+})
+export class BoxViewInitDemoModule {
+
+}

src/jigsaw/component/box/box.ts

@@ -23,6 +23,7 @@ export class JigsawBox extends JigsawResizableBoxBase implements AfterContentIni
 
     public static resizeEnd = new EventEmitter();
     public static resizeStart = new EventEmitter();
+    public static viewInit = new EventEmitter();
 
     @Input()
     public resizable: boolean;
@@ -169,6 +170,7 @@ export class JigsawBox extends JigsawResizableBoxBase implements AfterContentIni
 
         this.callLater(() => {
             this._$isFlicker = false;
+            if(!this.parent) JigsawBox.viewInit.emit();
         });
     }