Skip to content

Commit 90544d5

Browse files
hpyourdkmaster
hpyou
authored and
rdkmaster
committed
特性：editable-box支持将tab作为容器
* box can select renderer-tab * tab in box * tab view check protect * cache tabs metadata * tab meta data parse to inner html * move tab metadata to tab wrapper * fix set data can not show content bug * tab html parse to tab metadata * format code * optimize tab wrapper * optimize tab wrapper * rename tab wrapper * tab wrapper module import into box module * optimize tab wrapper * optimize tab wrapper * tab wrapper render tab pane by metadate * editable tab and demo * tab add * tab wrapper add editable tab * editable tab title and in tab wrapper * optimize editable tab style and interaction * optimize editable tab style and interaction * tab wrapper toggle editable * fixes build error * box in tab content and parse to html * rename selector custom-tab to j-tab-wrapper * box in tab style * box in tab style * box in tab style * box option bar interactive style * editable tab add default tab * box option bar interactive style * parse tab html to tab wrapper metadata and show in box * fixes pane metadata has two same item * fixes tab remove tab index bigger then selected index throw error * fixes when outer box is uneditable,box in tab is editable * update tab wrapper when move components * get tabs wrapper components * fixes parse attribute value throw error * add tab wrapper module to package * tab default select first tab * box and tab wrapper interaction * fixes box in tab editable state error * fixes build error * doc warn * decouple tap wrapper * parse api function of LayoutData * optimize get tab content * code review * fixes only show page from html string can not parse tab wrapper,and continue decoupling tap wrapper * fixes change detector error * tab wrapper add content sync * box content linkage * LayoutData get all inner components * drag to set cipher and save to metadata * custom component editable to drag * in editable state box inner component linkage * better demo code * move EditableTabTitleRenderer to tab * code review * fixes dragging component make all draggable component has same emitterCipher * make tap wrapper components have same emitterCipher * add internal tag * fixes switch tab content appear scrollbar
1 parent 31a6a7b commit 90544d5

32 files changed

+1026
-129
lines changed

‎build/scripts/doc-generator/json-parser.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@ fs.writeFileSync(`${output}/list`, JSON.stringify(apiList));
9696
fs.writeFileSync(`${workDir}/wechat-group.html`, fs.readFileSync(`${__dirname}/wechat-group.html`));
9797
fs.writeFileSync(`${workDir}/wechat-public-subscription.html`, fs.readFileSync(`${__dirname}/wechat-public-subscription.html`));
9898
if (!checkUnknownTypes()) {
99-
process.exit(1);
99+
console.warn('unknown types checked');
100+
process.exit(0);
100101
}
101102

102103
function findExtends(ci) {

‎src/app/demo/layout/custom-scene-layout/custom-graph/demo.component.ts‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
1-
import {Component, OnInit, ViewChild} from '@angular/core';
1+
import {Component, OnInit, Optional, ViewChild} from '@angular/core';
22
import {AbstractGraphData} from "jigsaw/core/data/graph-data";
33
import {EchartOptions} from "jigsaw/core/data/echart-types";
44
import {JigsawGraph} from "jigsaw/component/graph/graph";
5+
import {DragDropInfo} from "jigsaw/directive/dragdrop/types";
6+
import {EmittableComponent} from "../linkage.common";
7+
import {JigsawTabsWrapper} from "../../../../../jigsaw/component/box/tabs-wrapper/tabs-wrapper";
8+
import {JigsawEditableBox} from "../../../../../jigsaw/component/box/editable-box";
59

610
@Component({
711
selector: 'custom-graph',
8-
template: '<jigsaw-graph [data]="data" #graph></jigsaw-graph>',
12+
template: `
13+
<div class="custom-graph" jigsaw-draggable (jigsawDragStart)="dragStartHandle($event)">
14+
<button (click)="handleClick()">click me</button>
15+
<br>
16+
<jigsaw-graph [data]="data" #graph></jigsaw-graph>
17+
</div>
18+
`,
919
styles: [`
1020
:host {
1121
display: block;
1222
width: 100%;
1323
}
1424
`]
1525
})
16-
export class CustomGraphComponent implements OnInit {
26+
export class CustomGraphComponent extends EmittableComponent implements OnInit {
27+
constructor(@Optional() public tabWrapper: JigsawTabsWrapper) {
28+
super();
29+
}
30+
1731
data: AbstractGraphData;
1832

1933
@ViewChild("graph") graph: JigsawGraph;
@@ -28,6 +42,29 @@ export class CustomGraphComponent implements OnInit {
2842
}
2943
};
3044

45+
handleClick() {
46+
this.emit((new Date()).toLocaleString());
47+
}
48+
49+
// 拖拽实现联动
50+
dragStartHandle(dragInfo: DragDropInfo) {
51+
if (!this.box.editable) return;
52+
console.log('drag start');
53+
this.emitterCipher = 'cipher' + (new Date()).getTime();
54+
if (this.tabWrapper) {
55+
// 同一个wrapper里的组件实现统一发送口号
56+
this.tabWrapper.components.forEach(componentRef => {
57+
if(componentRef.instance instanceof JigsawEditableBox) {
58+
componentRef.instance.data.getComponents().forEach(componentInfo => {
59+
if (componentInfo.component.instance.emitterCipher == this.emitterCipher) return;
60+
componentInfo.component.instance.emitterCipher = this.emitterCipher;
61+
})
62+
}
63+
});
64+
}
65+
dragInfo.dragDropData = this.emitterCipher;
66+
}
67+
3168
ngOnInit() {
3269
let graphData = new GraphDataDemo();
3370
this.data = graphData;

‎src/app/demo/layout/custom-scene-layout/custom-graph/demo.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {NgModule} from "@angular/core";
22
import {JigsawGraphModule} from "jigsaw/component/graph/index";
33
import {CustomGraphComponent} from "./demo.component";
4+
import {JigsawDraggableModule} from "jigsaw/directive/dragdrop/index";
45

56
@NgModule({
67
declarations: [CustomGraphComponent],
78
exports: [CustomGraphComponent],
8-
imports: [JigsawGraphModule]
9+
imports: [JigsawGraphModule, JigsawDraggableModule]
910
})
1011
export class CustomGraphModule {
1112

‎src/app/demo/layout/custom-scene-layout/custom-table/demo.component.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
1-
import {Component} from "@angular/core";
1+
import {Component, ComponentRef} from "@angular/core";
22
import {TableData} from "jigsaw/core/data/table-data";
33
import {HttpClient} from "@angular/common/http";
4+
import {DragDropInfo} from "jigsaw/directive/dragdrop/types";
5+
import {SubscribableComponent} from "../linkage.common";
46

57
@Component({
68
selector: 'custom-table',
7-
template: '<jigsaw-table [data]="tableData" ></jigsaw-table>',
9+
template: `
10+
<div class="custom-table" jigsaw-droppable (jigsawDrop)="dropHandle($event)">
11+
{{message}}<br>
12+
<jigsaw-table [data]="tableData"></jigsaw-table>
13+
</div>
14+
`,
815
styles: [`
916
:host {
1017
display: block;
1118
width: 100%;
1219
}
1320
`]
1421
})
15-
export class CustomTableComponent {
22+
export class CustomTableComponent extends SubscribableComponent {
1623
tableData: TableData;
1724

1825
constructor(http: HttpClient) {
26+
super();
1927
this.tableData = new TableData();
2028
this.tableData.http = http;
2129
this.tableData.fromAjax('mock-data/hr-list');
2230
}
31+
32+
dropHandle(dragInfo: DragDropInfo) {
33+
if(!this.box.editable) return;
34+
console.log('drop', dragInfo.dragDropData);
35+
this.subscriberCipher = dragInfo.dragDropData;
36+
// 寻找口号相同的组件进行联动
37+
this.box.getRootBox().data.getAllInnerComponents().forEach(item => {
38+
if (!(item.component instanceof ComponentRef)) return;
39+
const component = item.component.instance;
40+
if(component.emitterCipher != this.subscriberCipher) return;
41+
component.subscribe(message => {
42+
this.message = message;
43+
})
44+
})
45+
}
2346
}
2447

‎src/app/demo/layout/custom-scene-layout/custom-table/demo.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import {NgModule} from '@angular/core';
22
import {JigsawTableModule} from "jigsaw/component/table/table";
33
import {CustomTableComponent} from './demo.component';
4+
import {JigsawDroppableModule} from "jigsaw/directive/dragdrop/index";
45

56
@NgModule({
6-
imports: [JigsawTableModule],
7+
imports: [JigsawTableModule, JigsawDroppableModule,],
78
declarations: [CustomTableComponent],
89
exports: [CustomTableComponent]
910
})

‎src/app/demo/layout/custom-scene-layout/demo.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<br>
2727
<br>
2828
Parse Area:
29-
<j-editable-box [(data)]="data3" [editable]="false" (fill)="handleFill($event)" height="400"></j-editable-box>
29+
<j-editable-box [(data)]="data3" [editable]="false" height="400"></j-editable-box>
3030

3131
<ng-template #dialog>
3232
<jigsaw-dialog width="40%" (close)="onAnswer()">

‎src/app/demo/layout/custom-scene-layout/demo.component.ts‎

Lines changed: 97 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,72 @@ import {Component, ComponentRef, TemplateRef, ViewChild, ViewEncapsulation} from
22
import {ComponentMetaData, LayoutData} from "jigsaw/core/data/layout-data";
33
import {PopupEffect, PopupInfo, PopupOptions, PopupService} from "jigsaw/service/popup.service";
44
import {JigsawEditableBox} from "jigsaw/component/box/editable-box";
5-
import {CustomTableComponent} from "./custom-table/demo.component";
65
import {CustomGraphComponent} from "./custom-graph/demo.component";
6+
import {CustomTableComponent} from "./custom-table/demo.component";
7+
import {JigsawTabsWrapper, TabsWrapperMetaData} from "jigsaw/component/box/tabs-wrapper/tabs-wrapper";
8+
import {JigsawTab} from "jigsaw/component/tabs/tab";
9+
10+
export const GlobalComponentMetaDataList: ComponentMetaData[] = [
11+
{
12+
label: "表格",
13+
component: CustomTableComponent,
14+
selector: 'custom-table',
15+
import: 'CustomTableModule,',
16+
inputs: [
17+
{
18+
property: 'data',
19+
binding: 'tableData',
20+
},
21+
{
22+
property: 'additionalColumnDefine',
23+
binding: 'additionalColumnDefine',
24+
default: {
25+
a: 1,
26+
b: [1, 2, 3],
27+
c: 'ww'
28+
}
29+
},
30+
{
31+
property: 'additionalData',
32+
binding: 'additionalData',
33+
default: {
34+
a: 1,
35+
b: [1, 2, 3],
36+
c: 'ww'
37+
}
38+
}
39+
]
40+
},
41+
{
42+
label: "图形",
43+
component: CustomGraphComponent,
44+
selector: 'custom-graph',
45+
import: 'CustomGraphModule,',
46+
inputs: [
47+
{
48+
property: 'data',
49+
binding: 'graphData',
50+
},
51+
{
52+
property: 'width',
53+
binding: 'graphWidth',
54+
default: 200
55+
}
56+
]
57+
},
58+
{
59+
label: "tab",
60+
component: JigsawTabsWrapper,
61+
selector: 'j-tabs-wrapper',
62+
import: 'JigsawTabsWrapperModule',
63+
inputs: [
64+
{
65+
property: 'data',
66+
binding: '123',
67+
},
68+
]
69+
},
70+
];
771

872
@Component({
973
templateUrl: './demo.component.html',
@@ -91,7 +155,22 @@ export class CustomSceneLayoutDemoComponent {
91155
this.data3 = LayoutData.of(data.toHtml(), this.componentMetaDataList);
92156
console.log(this.data3);
93157
setTimeout(() => {
94-
console.log(this.data3.getComponents());
158+
// 等待box渲染
159+
const allComponents = this.data3.getAllInnerComponents();
160+
// 实现组件间的联动
161+
allComponents.forEach(item => {
162+
if (!(item.component instanceof ComponentRef)) return;
163+
const component = item.component.instance;
164+
if (component.emitterCipher) {
165+
component.subscribe(message => {
166+
allComponents.forEach(item => {
167+
if (!(item.component instanceof ComponentRef) ||
168+
item.component.instance.subscriberCipher != component.emitterCipher) return;
169+
item.component.instance.message = message;
170+
})
171+
})
172+
}
173+
});
95174
})
96175
}
97176

@@ -131,55 +210,7 @@ export class CustomSceneLayoutDemoComponent {
131210
}
132211

133212
selectedComponent;
134-
componentMetaDataList: ComponentMetaData[] = [
135-
{
136-
label: "表格",
137-
component: CustomTableComponent,
138-
selector: 'custom-table',
139-
import: 'CustomTableModule,',
140-
inputs: [
141-
{
142-
property: 'data',
143-
binding: 'tableData',
144-
},
145-
{
146-
property: 'additionalColumnDefine',
147-
binding: 'additionalColumnDefine',
148-
default: {
149-
a: 1,
150-
b: [1, 2, 3],
151-
c: 'ww'
152-
}
153-
},
154-
{
155-
property: 'additionalData',
156-
binding: 'additionalData',
157-
default: {
158-
a: 1,
159-
b: [1, 2, 3],
160-
c: 'ww'
161-
}
162-
}
163-
]
164-
},
165-
{
166-
label: "图形",
167-
component: CustomGraphComponent,
168-
selector: 'custom-graph',
169-
import: 'CustomGraphModule,',
170-
inputs: [
171-
{
172-
property: 'data',
173-
binding: 'graphData',
174-
},
175-
{
176-
property: 'width',
177-
binding: 'graphWidth',
178-
default: 200
179-
}
180-
]
181-
},
182-
];
213+
componentMetaDataList: ComponentMetaData[] = GlobalComponentMetaDataList;
183214

184215
dialogInfo: PopupInfo;
185216

@@ -197,13 +228,22 @@ export class CustomSceneLayoutDemoComponent {
197228
if (this.dialogInfo) {
198229
this.dialogInfo.dispose();
199230
}
200-
this.currentEditableBox.addContent([
201-
{
202-
component: this.selectedComponent.component,
203-
selector: this.selectedComponent.selector,
204-
inputs: this.selectedComponent.inputs
231+
// 复制一遍，避免操作同一对象
232+
const componentMetaData = {
233+
component: this.selectedComponent.component,
234+
selector: this.selectedComponent.selector,
235+
inputs: [...this.selectedComponent.inputs]
236+
};
237+
238+
if (this.selectedComponent.component == JigsawTabsWrapper) {
239+
(<TabsWrapperMetaData>componentMetaData).tabsMetaData = {
240+
selector: 'j-tabs',
241+
component: JigsawTab,
242+
panes: []
205243
}
206-
]);
244+
}
245+
246+
this.currentEditableBox.addContent([componentMetaData]);
207247
}
208248

209249
getModalOptions(): PopupOptions {

‎src/app/demo/layout/custom-scene-layout/demo.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {CustomTableModule} from "./custom-table/demo.module";
1010
import {CustomGraphComponent} from "./custom-graph/demo.component";
1111
import {CustomGraphModule} from "./custom-graph/demo.module";
1212
import {CustomSceneLayoutDemoComponent} from "./demo.component";
13+
import {JigsawTabsWrapperModule} from "jigsaw/component/box/tabs-wrapper/tabs-wrapper";
1314

1415
@NgModule({
1516
declarations: [
@@ -21,10 +22,11 @@ import {CustomSceneLayoutDemoComponent} from "./demo.component";
2122
JigsawDialogModule,
2223
JigsawRadioModule,
2324
CommonModule,
25+
JigsawDemoDescriptionModule,
2426
// 可选的内容模块
2527
CustomTableModule,
2628
CustomGraphModule,
27-
JigsawDemoDescriptionModule
29+
JigsawTabsWrapperModule
2830
],
2931
exports: [CustomSceneLayoutDemoComponent],
3032
entryComponents: [CustomTableComponent, CustomGraphComponent] // 可选的内容组件

0 commit comments

Comments
 (0)