[优化]tab wrapper 添加 editableChange的监听

Author: hpyou

src/app/demo/editable-box/custom-scene-layout/demo.component.html

@@ -10,13 +10,16 @@
                (valueChange)="changeData($event)">
 </jigsaw-select>
 <button (click)="parseData(data)">parse data</button>
+<button (click)="editable = !editable">toggle editable</button>
 <j-editable-box [(data)]="data"
                 (fill)="handleFill($event)"
                 (fillTabs)="handleFillTabs($event)"
                 (resizeStart)="handleResizeStart($event)"
                 (resize)="handleResize($event)"
                 (add)="handleAddAndRemove()"
                 (remove)="handleAddAndRemove()"
+                [editable]="editable"
+                [showTabBar]="true"
                 resizeLineWidth="4"
                 height="400"></j-editable-box>
 <br>
@@ -27,7 +30,7 @@
 <br>
 <br>
 Parse Area:
-<j-editable-box [(data)]="data3" [editable]="false" height="400"></j-editable-box>
+<j-editable-box [(data)]="data3" [editable]="editable" height="400" [showTabBar]="true"></j-editable-box>
 
 <ng-template #dialog>
     <jigsaw-dialog width="40%" (close)="onAnswer()">

src/app/demo/editable-box/custom-scene-layout/demo.component.ts

@@ -266,6 +266,8 @@ export class CustomSceneLayoutDemoComponent {
         box.addContent([tabsWrapperMetadata]);
     }
 
+    editable: boolean = true;
+
     getModalOptions(): PopupOptions {
         return {
             modal: true, //是否模态

src/jigsaw/component/box/editable-box.html

@@ -8,6 +8,7 @@
     [(grow)]="itemData.grow"
     [shrink]="itemData.shrink"
     [editable]="editable"
+    [showTabBar]="showTabBar"
     [_isFirst]="isFirst"
     [resizeLineWidth]="resizeLineWidth"
     [parent]="this"
@@ -25,7 +26,7 @@
      [class.jigsaw-editable-box-has-content]="data?.components?.length">
     <span class="fa fa-minus-square-o" (click)="_$addBox('v')"></span>
     <span class="fa fa-columns" (click)="_$addBox('h')"></span>
-    <span class="fa fa fa-clone" (click)="_$addTabsWrapper()"></span>
+    <span *ngIf="showTabBar" class="fa fa fa-clone" (click)="_$addTabsWrapper()"></span>
     <span class="fa fa-trash-o" (click)="_$remove()"></span>
 </div>
 

src/jigsaw/component/box/editable-box.ts

@@ -57,8 +57,23 @@ export class JigsawEditableBox extends JigsawResizableBoxBase implements AfterVi
         });
     }
 
+    private _editable: boolean = true;
+
     @Input()
-    public editable: boolean = true;
+    public get editable(): boolean {
+        return this._editable;
+    }
+
+    public set editable(value: boolean) {
+        if(this.editable == value) return;
+        this._editable = value;
+        if(!this.parent) {
+            this.editableChange.emit(value);
+        }
+    }
+
+    @Output()
+    public editableChange = new EventEmitter<boolean>();
 
     public blocked: boolean;
 
@@ -73,6 +88,9 @@ export class JigsawEditableBox extends JigsawResizableBoxBase implements AfterVi
     @Input()
     public parent: JigsawEditableBox;
 
+    @Input()
+    public showTabBar: boolean;
+
     private _resizeLineWidth: string;
 
     @Input()

src/jigsaw/component/box/tabs-wrapper/tabs-wrapper.ts

@@ -108,6 +108,8 @@ export class JigsawTabsWrapper implements AfterViewInit {
                 componentRef.instance[input.property] = input.default;
             })
         }
+        // 监听tab里面box的fill/fillTabs事件
+        this._listenEvents(componentRef);
     }
 
     private _renderTabByMetaData() {
@@ -132,17 +134,27 @@ export class JigsawTabsWrapper implements AfterViewInit {
             if (!pane.content || !pane.content.length) return;
             const contentMetaData = pane.content[0];
             if (contentMetaData.selector != 'j-editable-box') return;
-            contentMetaData.inputs.unshift({ // 放在data属性的前面，data会调用box渲染内容的函数，需要在渲染前准备好其他属性
+            // 放在data属性的前面，data会调用box渲染内容的函数，需要在渲染前准备好其他属性
+            contentMetaData.inputs.unshift({
                 property: 'editable',
                 default: this._$editable
-            })
+            },{
+                property: 'showTabBar',
+                default: this._box.showTabBar
+            });
         });
     }
 
     private _addDefaultTab() {
         const componentMetaData = {
             selector: 'j-editable-box',
-            component: JigsawEditableBox
+            component: JigsawEditableBox,
+            inputs: [
+                {
+                    property: 'showTabBar',
+                    default: this._box.showTabBar
+                }
+            ]
         };
         this.addTab(componentMetaData);
 
@@ -151,18 +163,23 @@ export class JigsawTabsWrapper implements AfterViewInit {
             title: 'New Tab',
             content: [componentMetaData]
         });
+    }
 
-        // 监听tab里面box的fill/fillTabs事件
-        const insertComponent = this._tabs._tabContents.last._tabItemRef;
-        if (insertComponent instanceof ComponentRef &&
-            insertComponent.instance instanceof JigsawEditableBox) {
-            insertComponent.instance.fill.subscribe(box => {
-                this._box.getRootBox().fill.emit(box);
-            });
-            insertComponent.instance.fillTabs.subscribe(box => {
-                this._box.getRootBox().fillTabs.emit(box);
-            })
-        }
+    private _listenEvents(insertComponent) {
+        if (!(insertComponent instanceof ComponentRef) ||
+            !(insertComponent.instance instanceof JigsawEditableBox)) return;
+
+        insertComponent.instance.fill.subscribe(box => {
+            this._box.getRootBox().fill.emit(box);
+        });
+        insertComponent.instance.fillTabs.subscribe(box => {
+            this._box.getRootBox().fillTabs.emit(box);
+        });
+        this._box.getRootBox().editableChange.subscribe(editable => {
+            if(insertComponent.instance instanceof JigsawEditableBox) {
+                insertComponent.instance.editable = editable;
+            }
+        })
     }
 
     ngAfterViewInit() {