ngx-axis-appforge 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/axis-components/design/index.d.ts +12 -10
- package/core/index.d.ts +9 -2
- package/fesm2022/ngx-axis-appforge-axis-components-desc-design.mjs +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-desc-design.mjs.map +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-design.mjs +49 -35
- package/fesm2022/ngx-axis-appforge-axis-components-design.mjs.map +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-splitter-design.mjs +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-splitter-design.mjs.map +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-table-design.mjs +3 -2
- package/fesm2022/ngx-axis-appforge-axis-components-table-design.mjs.map +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-tree-selector-design.mjs +1 -1
- package/fesm2022/ngx-axis-appforge-axis-components-tree-selector-design.mjs.map +1 -1
- package/fesm2022/ngx-axis-appforge-core.mjs +17 -9
- package/fesm2022/ngx-axis-appforge-core.mjs.map +1 -1
- package/package.json +62 -62
|
@@ -22,7 +22,7 @@ import { FilteredTreeResult, AXIS_COMPONENTS_LOADER_TOKEN, ScopeDirective, Dynam
|
|
|
22
22
|
import * as i6 from 'ng-zorro-antd/button';
|
|
23
23
|
import { NzButtonModule } from 'ng-zorro-antd/button';
|
|
24
24
|
import * as i9 from 'ng-zorro-antd/tooltip';
|
|
25
|
-
import { NzTooltipModule
|
|
25
|
+
import { NzTooltipModule } from 'ng-zorro-antd/tooltip';
|
|
26
26
|
import * as i10 from 'ng-zorro-antd/empty';
|
|
27
27
|
import { NzEmptyModule } from 'ng-zorro-antd/empty';
|
|
28
28
|
import * as i7 from 'ng-zorro-antd/core/transition-patch';
|
|
@@ -150,7 +150,7 @@ class DragDrop {
|
|
|
150
150
|
else {
|
|
151
151
|
this.dropNode.dropObj[this.targetIndex] = dragObj;
|
|
152
152
|
}
|
|
153
|
-
this.onChange();
|
|
153
|
+
this.onChange({ historyDesc: `拖拽${this.dragNode?.name}` });
|
|
154
154
|
}
|
|
155
155
|
this.dragNode = undefined;
|
|
156
156
|
this.updateElementStyle();
|
|
@@ -185,7 +185,7 @@ class Tree {
|
|
|
185
185
|
onChange = output();
|
|
186
186
|
onSelect = output();
|
|
187
187
|
onContextMenu = output();
|
|
188
|
-
dragdrop = computed(() => new DragDrop(this.optionsNodes(), this.optionIdflatNodes, this.treeControl, () => this.onChange.emit(
|
|
188
|
+
dragdrop = computed(() => new DragDrop(this.optionsNodes(), this.optionIdflatNodes, this.treeControl, (e) => this.onChange.emit(e)), ...(ngDevMode ? [{ debugName: "dragdrop" }] : []));
|
|
189
189
|
optionIdflatNodes = new Map();
|
|
190
190
|
flatNodeMap = new Map();
|
|
191
191
|
nestedNodeMap = new Map();
|
|
@@ -296,9 +296,9 @@ class Tree {
|
|
|
296
296
|
this.unSelectAll();
|
|
297
297
|
for (const nodeId of nodeIds) {
|
|
298
298
|
this.select(nodeId);
|
|
299
|
-
const node = this.
|
|
300
|
-
if (node) {
|
|
301
|
-
this.treeControl.expand(node);
|
|
299
|
+
const node = this.optionsNodes().get(nodeId);
|
|
300
|
+
if (node?.parentId) {
|
|
301
|
+
this.treeControl.expand(this.optionIdflatNodes.get(node.parentId));
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
this.cdRef.markForCheck();
|
|
@@ -329,6 +329,7 @@ class Tree {
|
|
|
329
329
|
removeSelected() {
|
|
330
330
|
let changed = false;
|
|
331
331
|
let next = undefined;
|
|
332
|
+
let nextNodeId;
|
|
332
333
|
for (const nodeId of this.selectListSelection.selected) {
|
|
333
334
|
const node = this.optionsNodes().get(nodeId);
|
|
334
335
|
if (node) {
|
|
@@ -337,8 +338,12 @@ class Tree {
|
|
|
337
338
|
next = null;
|
|
338
339
|
}
|
|
339
340
|
else {
|
|
341
|
+
nextNodeId = node.parentId;
|
|
340
342
|
if (Array.isArray(node.parentObj)) {
|
|
341
343
|
node.parentObj.splice(node.parentObj.indexOf(node.options), 1);
|
|
344
|
+
if (node.parentObj.length) {
|
|
345
|
+
nextNodeId = node.parentObj[Math.min(node.indexOfParentObj, node.parentObj.length - 1)].id;
|
|
346
|
+
}
|
|
342
347
|
}
|
|
343
348
|
else {
|
|
344
349
|
node.parentObj[node.indexOfParentObj] = null;
|
|
@@ -347,10 +352,10 @@ class Tree {
|
|
|
347
352
|
}
|
|
348
353
|
}
|
|
349
354
|
if (changed) {
|
|
350
|
-
this.onChange.emit(next);
|
|
355
|
+
this.onChange.emit({ value: next, nextNodeId: nextNodeId });
|
|
351
356
|
}
|
|
352
357
|
}
|
|
353
|
-
addNodeForSelected(nodes, deleteSuccess = false) {
|
|
358
|
+
addNodeForSelected(nodes, deleteSuccess = false, historyDesc) {
|
|
354
359
|
if (nodes.length && this.selectListSelection.selected) {
|
|
355
360
|
for (const nodeId of this.selectListSelection.selected) {
|
|
356
361
|
const parentNode = this.optionsNodes().get(nodeId);
|
|
@@ -368,7 +373,7 @@ class Tree {
|
|
|
368
373
|
}
|
|
369
374
|
}
|
|
370
375
|
}
|
|
371
|
-
this.onChange.emit(
|
|
376
|
+
this.onChange.emit({ historyDesc });
|
|
372
377
|
}
|
|
373
378
|
}
|
|
374
379
|
deleteNode(node) {
|
|
@@ -385,7 +390,7 @@ class Tree {
|
|
|
385
390
|
this.design.chooseComponent().subscribe(res => {
|
|
386
391
|
const { options, config } = res;
|
|
387
392
|
if (options && config) {
|
|
388
|
-
this.onChange.emit(options);
|
|
393
|
+
this.onChange.emit({ value: options });
|
|
389
394
|
}
|
|
390
395
|
});
|
|
391
396
|
}
|
|
@@ -569,7 +574,7 @@ class DragService {
|
|
|
569
574
|
const dragNode = this.getOptionsNode(this.dragEn);
|
|
570
575
|
let targetIndex = this.dropHandler.beforeElement ? this.preview.getNodeByElement(this.dropHandler.beforeElement)?.indexOfParentObj : dropNode?.defaultDropIndex;
|
|
571
576
|
if (dropNode.dropObj == dragNode.parentObj && dragNode.indexOfParentObj == targetIndex) {
|
|
572
|
-
this.preview.onDragEnd(
|
|
577
|
+
this.preview.onDragEnd({ historyDesc: `拖拽${dragNode.name}` });
|
|
573
578
|
}
|
|
574
579
|
else {
|
|
575
580
|
dragId = dragNode?.id;
|
|
@@ -591,13 +596,13 @@ class DragService {
|
|
|
591
596
|
else {
|
|
592
597
|
dropNode.dropObj[targetIndex] = dragObj;
|
|
593
598
|
}
|
|
594
|
-
this.preview.onDragEnd(
|
|
599
|
+
this.preview.onDragEnd({ historyDesc: `拖拽${dragNode.name}` });
|
|
595
600
|
}
|
|
596
601
|
this.dropHandler.onDragEnd();
|
|
597
602
|
this.dropHandler = undefined;
|
|
598
603
|
}
|
|
599
604
|
else {
|
|
600
|
-
this.preview.onDragEnd(
|
|
605
|
+
this.preview.onDragEnd();
|
|
601
606
|
}
|
|
602
607
|
this.dragEn.element.style.display = this.oriDragDisplay;
|
|
603
608
|
this.dragEn = undefined;
|
|
@@ -848,9 +853,9 @@ class Preview {
|
|
|
848
853
|
onDragStart() {
|
|
849
854
|
this.selectService.disableHover();
|
|
850
855
|
}
|
|
851
|
-
onDragEnd(
|
|
852
|
-
if (
|
|
853
|
-
this.onChange.emit();
|
|
856
|
+
onDragEnd(e) {
|
|
857
|
+
if (e) {
|
|
858
|
+
this.onChange.emit(e);
|
|
854
859
|
}
|
|
855
860
|
this.selectService.enableHover();
|
|
856
861
|
}
|
|
@@ -1112,6 +1117,7 @@ class ShortcutKey {
|
|
|
1112
1117
|
switch (event) {
|
|
1113
1118
|
case "delete":
|
|
1114
1119
|
this.design.tree.removeSelected();
|
|
1120
|
+
this.design.element.nativeElement.focus();
|
|
1115
1121
|
break;
|
|
1116
1122
|
case "undo":
|
|
1117
1123
|
this.design.tools.undo();
|
|
@@ -1234,12 +1240,12 @@ class Toolbar {
|
|
|
1234
1240
|
shortcutKeysModal = model(false, ...(ngDevMode ? [{ debugName: "shortcutKeysModal" }] : []));
|
|
1235
1241
|
history = [];
|
|
1236
1242
|
historyIndex = 0;
|
|
1237
|
-
putHistory(options) {
|
|
1243
|
+
putHistory(options, desc) {
|
|
1238
1244
|
if (this.historyIndex > 0) {
|
|
1239
1245
|
this.history.splice(0, this.historyIndex);
|
|
1240
1246
|
this.historyIndex = 0;
|
|
1241
1247
|
}
|
|
1242
|
-
this.history.unshift({ options: copy(options, true), time: new Date() });
|
|
1248
|
+
this.history.unshift({ options: copy(options, true), time: new Date(), desc });
|
|
1243
1249
|
if (this.history.length > 50) {
|
|
1244
1250
|
this.history.pop();
|
|
1245
1251
|
}
|
|
@@ -1248,30 +1254,30 @@ class Toolbar {
|
|
|
1248
1254
|
undo() {
|
|
1249
1255
|
if (this.historyIndex < this.history.length - 1) {
|
|
1250
1256
|
this.historyIndex++;
|
|
1251
|
-
this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
|
|
1257
|
+
this.design.onChangeOptionsConfig({ value: copy(this.history[this.historyIndex].options, true), putHistory: false });
|
|
1252
1258
|
this.cdr.markForCheck();
|
|
1253
1259
|
}
|
|
1254
1260
|
}
|
|
1255
1261
|
redo() {
|
|
1256
1262
|
if (this.historyIndex > 0) {
|
|
1257
1263
|
this.historyIndex--;
|
|
1258
|
-
this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
|
|
1264
|
+
this.design.onChangeOptionsConfig({ value: copy(this.history[this.historyIndex].options, true), putHistory: false });
|
|
1259
1265
|
this.cdr.markForCheck();
|
|
1260
1266
|
}
|
|
1261
1267
|
}
|
|
1262
1268
|
switchHistory(index) {
|
|
1263
1269
|
if (index != this.historyIndex && index > -1 && index < this.history.length) {
|
|
1264
1270
|
this.historyIndex = index;
|
|
1265
|
-
this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
|
|
1271
|
+
this.design.onChangeOptionsConfig({ value: copy(this.history[this.historyIndex].options, true), putHistory: false });
|
|
1266
1272
|
this.cdr.markForCheck();
|
|
1267
1273
|
}
|
|
1268
1274
|
}
|
|
1269
1275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1270
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Toolbar, isStandalone: true, selector: "axis-toolbar", inputs: { shortcutKeysModal: { classPropertyName: "shortcutKeysModal", publicName: "shortcutKeysModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shortcutKeysModal: "shortcutKeysModalChange" }, ngImport: i0, template: "<div class=\"tools\" nz-flex nzGap=\"4px\">\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u5FEB\u6377\u952E\u8BF4\u660E\"\n (click)=\"shortcutKeysModal.set(true)\">\n <nz-icon nzType=\"exclamation-circle\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u7F16\u8F91\u5386\u53F2\" nz-popover\n [nzPopoverTitle]=\"historyTitle\" nzPopoverTrigger=\"click\" [nzPopoverContent]=\"historyTemp\"\n nzPopoverPlacement=\"bottom\" nzPopoverOverlayClassName=\"history-popover\">\n <nz-icon nzType=\"history\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" [nz-tooltip]=\"onlyPreview()?'\u6062\u590D':'\u653E\u5927'\"\n (click)=\"onlyPreview.set(!onlyPreview())\">\n <nz-icon [nzType]=\"onlyPreview()?'fullscreen-exit':'fullscreen'\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u65B0\u8F7D\u5165\"\n (click)=\"design.preview.forceRender()\">\n <nz-icon nzType=\"reload\" />\n </button>\n</div>\n\n<ng-template #historyTitle>\n <div nz-flex>\n <div style=\"flex:1\">\u7F16\u8F91\u5386\u53F2</div>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u64A4\u9500\" (click)=\"undo()\"\n [disabled]=\"historyIndex==history.length-1\">\n <nz-icon nzType=\"undo\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u505A\" (click)=\"redo()\"\n [disabled]=\"historyIndex==0\">\n <nz-icon nzType=\"redo\" nzTheme=\"outline\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #historyTemp>\n <div nz-flex nzVertical>\n @for (item of history; track item.time;let i=$index) {\n <div nz-flex [class.active]=\"i == historyIndex\" class=\"history-item\" (click)=\"switchHistory(i)\">\n <div style=\"width: 20px;\">\n @if (i == historyIndex) {\n <nz-icon nzType=\"aim\" nzTheme=\"outline\" />\n }\n </div>\n <div
|
|
1276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Toolbar, isStandalone: true, selector: "axis-toolbar", inputs: { shortcutKeysModal: { classPropertyName: "shortcutKeysModal", publicName: "shortcutKeysModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shortcutKeysModal: "shortcutKeysModalChange" }, ngImport: i0, template: "<div class=\"tools\" nz-flex nzGap=\"4px\">\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u5FEB\u6377\u952E\u8BF4\u660E\"\n (click)=\"shortcutKeysModal.set(true)\">\n <nz-icon nzType=\"exclamation-circle\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u7F16\u8F91\u5386\u53F2\" nz-popover\n [nzPopoverTitle]=\"historyTitle\" nzPopoverTrigger=\"click\" [nzPopoverContent]=\"historyTemp\"\n nzPopoverPlacement=\"bottom\" nzPopoverOverlayClassName=\"history-popover\">\n <nz-icon nzType=\"history\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" [nz-tooltip]=\"onlyPreview()?'\u6062\u590D':'\u653E\u5927'\"\n (click)=\"onlyPreview.set(!onlyPreview())\">\n <nz-icon [nzType]=\"onlyPreview()?'fullscreen-exit':'fullscreen'\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u65B0\u8F7D\u5165\"\n (click)=\"design.preview.forceRender()\">\n <nz-icon nzType=\"reload\" />\n </button>\n</div>\n\n<ng-template #historyTitle>\n <div nz-flex>\n <div style=\"flex:1\">\u7F16\u8F91\u5386\u53F2</div>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u64A4\u9500\" (click)=\"undo()\"\n [disabled]=\"historyIndex==history.length-1\">\n <nz-icon nzType=\"undo\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u505A\" (click)=\"redo()\"\n [disabled]=\"historyIndex==0\">\n <nz-icon nzType=\"redo\" nzTheme=\"outline\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #historyTemp>\n <div nz-flex nzVertical nzGap=\"6px\">\n @for (item of history; track item.time;let i=$index) {\n <div nz-flex nzAlign=\"center\" [class.active]=\"i == historyIndex\" class=\"history-item\" (click)=\"switchHistory(i)\">\n <div style=\"width: 20px;\">\n @if (i == historyIndex) {\n <nz-icon nzType=\"aim\" nzTheme=\"outline\" />\n }\n </div>\n <div nz-flex nzVertical>\n <span>{{item.desc}}</span>\n <span style=\"font-size: 10px;color:rgba(0,0,0,0.38)\"> {{item.time | axisHowLong}}</span>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<nz-modal [(nzVisible)]=\"shortcutKeysModal\" nzTitle=\"\u5FEB\u6377\u952E\u8BF4\u660E\" nzDraggable [nzOkText]=\"null\" nzCancelText=\"\u5173\u95ED\"\n (nzOnCancel)=\"shortcutKeysModal.set(false)\">\n <ng-container *nzModalContent>\n <nz-table nzTemplateMode nzSize=\"small\">\n <thead>\n <tr>\n <th>\u529F\u80FD</th>\n <th>\u5FEB\u6377\u952E</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u67E5\u770B\u5FEB\u6377\u952E\u8BF4\u660E</td>\n <td>Ctrl Meta H</td>\n </tr>\n <tr>\n <td>\u590D\u5236</td>\n <td>Ctrl C</td>\n </tr>\n <tr>\n <td>\u526A\u5207</td>\n <td>Ctrl X</td>\n </tr>\n <tr>\n <td>\u7C98\u8D34</td>\n <td>Ctrl V</td>\n </tr>\n <tr>\n <td>\u64A4\u9500</td>\n <td>Ctrl Z</td>\n </tr>\n <tr>\n <td>\u91CD\u505A</td>\n <td>Ctrl Shift Z</td>\n </tr>\n <tr>\n <td>\u9884\u89C8\u653E\u5927/\u6062\u590D</td>\n <td>Ctrl Meta C</td>\n </tr>\n <tr>\n <td>\u91CD\u65B0\u8F7D\u5165</td>\n <td>Ctrl Meta R</td>\n </tr>\n </tbody>\n </nz-table>\n </ng-container>\n</nz-modal>", styles: [".tools{position:absolute;right:20px;top:10px}::ng-deep .history-popover .ant-popover-inner-content{width:100%;padding:12px 0}.history-item{padding:0 12px;cursor:pointer}.history-item:hover{background-color:var(--ant-primary-1)}.active{color:var(--ant-primary-color);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1$2.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i1$2.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i2$2.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i2$2.NzTableCellDirective, selector: "th:not(.nz-disable-th), td:not(.nz-disable-td)" }, { kind: "directive", type: i2$2.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i2$2.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i2$2.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i2$2.NzTrDirective, selector: "tr:not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i9.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i7.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzPopoverModule }, { kind: "directive", type: i8$1.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverTitleContext", "nzPopoverContent", "nzPopoverContentContext", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverOverlayClickable", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "pipe", type: HowLongPipe, name: "axisHowLong" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1271
1277
|
}
|
|
1272
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, decorators: [{
|
|
1273
1279
|
type: Component,
|
|
1274
|
-
args: [{ selector: 'axis-toolbar', imports: [NzModalModule, NzTableModule, NzFlexModule, NzIconModule,
|
|
1280
|
+
args: [{ selector: 'axis-toolbar', imports: [NzModalModule, NzTableModule, NzFlexModule, NzIconModule, NzTooltipModule, NzButtonModule, NzPopoverModule, HowLongPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tools\" nz-flex nzGap=\"4px\">\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u5FEB\u6377\u952E\u8BF4\u660E\"\n (click)=\"shortcutKeysModal.set(true)\">\n <nz-icon nzType=\"exclamation-circle\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u7F16\u8F91\u5386\u53F2\" nz-popover\n [nzPopoverTitle]=\"historyTitle\" nzPopoverTrigger=\"click\" [nzPopoverContent]=\"historyTemp\"\n nzPopoverPlacement=\"bottom\" nzPopoverOverlayClassName=\"history-popover\">\n <nz-icon nzType=\"history\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" [nz-tooltip]=\"onlyPreview()?'\u6062\u590D':'\u653E\u5927'\"\n (click)=\"onlyPreview.set(!onlyPreview())\">\n <nz-icon [nzType]=\"onlyPreview()?'fullscreen-exit':'fullscreen'\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"text\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u65B0\u8F7D\u5165\"\n (click)=\"design.preview.forceRender()\">\n <nz-icon nzType=\"reload\" />\n </button>\n</div>\n\n<ng-template #historyTitle>\n <div nz-flex>\n <div style=\"flex:1\">\u7F16\u8F91\u5386\u53F2</div>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u64A4\u9500\" (click)=\"undo()\"\n [disabled]=\"historyIndex==history.length-1\">\n <nz-icon nzType=\"undo\" nzTheme=\"outline\" />\n </button>\n <button nz-button nzSize=\"small\" nzType=\"link\" nzShape=\"circle\" nz-tooltip=\"\u91CD\u505A\" (click)=\"redo()\"\n [disabled]=\"historyIndex==0\">\n <nz-icon nzType=\"redo\" nzTheme=\"outline\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #historyTemp>\n <div nz-flex nzVertical nzGap=\"6px\">\n @for (item of history; track item.time;let i=$index) {\n <div nz-flex nzAlign=\"center\" [class.active]=\"i == historyIndex\" class=\"history-item\" (click)=\"switchHistory(i)\">\n <div style=\"width: 20px;\">\n @if (i == historyIndex) {\n <nz-icon nzType=\"aim\" nzTheme=\"outline\" />\n }\n </div>\n <div nz-flex nzVertical>\n <span>{{item.desc}}</span>\n <span style=\"font-size: 10px;color:rgba(0,0,0,0.38)\"> {{item.time | axisHowLong}}</span>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<nz-modal [(nzVisible)]=\"shortcutKeysModal\" nzTitle=\"\u5FEB\u6377\u952E\u8BF4\u660E\" nzDraggable [nzOkText]=\"null\" nzCancelText=\"\u5173\u95ED\"\n (nzOnCancel)=\"shortcutKeysModal.set(false)\">\n <ng-container *nzModalContent>\n <nz-table nzTemplateMode nzSize=\"small\">\n <thead>\n <tr>\n <th>\u529F\u80FD</th>\n <th>\u5FEB\u6377\u952E</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u67E5\u770B\u5FEB\u6377\u952E\u8BF4\u660E</td>\n <td>Ctrl Meta H</td>\n </tr>\n <tr>\n <td>\u590D\u5236</td>\n <td>Ctrl C</td>\n </tr>\n <tr>\n <td>\u526A\u5207</td>\n <td>Ctrl X</td>\n </tr>\n <tr>\n <td>\u7C98\u8D34</td>\n <td>Ctrl V</td>\n </tr>\n <tr>\n <td>\u64A4\u9500</td>\n <td>Ctrl Z</td>\n </tr>\n <tr>\n <td>\u91CD\u505A</td>\n <td>Ctrl Shift Z</td>\n </tr>\n <tr>\n <td>\u9884\u89C8\u653E\u5927/\u6062\u590D</td>\n <td>Ctrl Meta C</td>\n </tr>\n <tr>\n <td>\u91CD\u65B0\u8F7D\u5165</td>\n <td>Ctrl Meta R</td>\n </tr>\n </tbody>\n </nz-table>\n </ng-container>\n</nz-modal>", styles: [".tools{position:absolute;right:20px;top:10px}::ng-deep .history-popover .ant-popover-inner-content{width:100%;padding:12px 0}.history-item{padding:0 12px;cursor:pointer}.history-item:hover{background-color:var(--ant-primary-1)}.active{color:var(--ant-primary-color);pointer-events:none}\n"] }]
|
|
1275
1281
|
}] });
|
|
1276
1282
|
|
|
1277
1283
|
class Design extends ValueAccess {
|
|
@@ -1282,6 +1288,7 @@ class Design extends ValueAccess {
|
|
|
1282
1288
|
.subscribe((value) => this.onChangeOptionsConfig(value)));
|
|
1283
1289
|
}
|
|
1284
1290
|
options = new DesignOptions();
|
|
1291
|
+
element = inject(ElementRef);
|
|
1285
1292
|
clipboard = inject(ClipboardService);
|
|
1286
1293
|
loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
|
|
1287
1294
|
injectDataObs = toObservable(this.options.injectData);
|
|
@@ -1314,12 +1321,12 @@ class Design extends ValueAccess {
|
|
|
1314
1321
|
changeSubject = new Subject();
|
|
1315
1322
|
setInitValue(value) {
|
|
1316
1323
|
super.setInitValue(value);
|
|
1317
|
-
this.tools.putHistory(value);
|
|
1324
|
+
this.tools.putHistory(value, "初始化");
|
|
1318
1325
|
this.render(value);
|
|
1319
1326
|
}
|
|
1320
1327
|
writeValue(value) {
|
|
1321
1328
|
super.writeValue(value);
|
|
1322
|
-
this.tools.putHistory(value);
|
|
1329
|
+
this.tools.putHistory(value, "初始化");
|
|
1323
1330
|
this.render(value);
|
|
1324
1331
|
}
|
|
1325
1332
|
async inspect(nextInfo) {
|
|
@@ -1383,13 +1390,15 @@ class Design extends ValueAccess {
|
|
|
1383
1390
|
}
|
|
1384
1391
|
return res?.treeNode;
|
|
1385
1392
|
}
|
|
1386
|
-
onChangeOptionsConfig(
|
|
1393
|
+
onChangeOptionsConfig(e) {
|
|
1387
1394
|
this.reset();
|
|
1395
|
+
let value = e.value;
|
|
1388
1396
|
if (value === undefined) {
|
|
1389
1397
|
value = this.value();
|
|
1390
1398
|
}
|
|
1391
1399
|
this.value.set(copy(value, true));
|
|
1392
1400
|
this.render(this.value());
|
|
1401
|
+
const putHistory = e.putHistory ?? true;
|
|
1393
1402
|
this.loadAndOptions()?.[0].then(() => {
|
|
1394
1403
|
if (!putHistory && this.settingOptionsNodeId) {
|
|
1395
1404
|
const node = this.optionsNodes.get(this.settingOptionsNodeId);
|
|
@@ -1398,10 +1407,15 @@ class Design extends ValueAccess {
|
|
|
1398
1407
|
}
|
|
1399
1408
|
this.syncToCode();
|
|
1400
1409
|
}
|
|
1410
|
+
if (e.nextNodeId) {
|
|
1411
|
+
this.tree.selectByNodeIds([e.nextNodeId]);
|
|
1412
|
+
this.preview.selectByNodeIds([e.nextNodeId]);
|
|
1413
|
+
this.loadSetting(e.nextNodeId);
|
|
1414
|
+
}
|
|
1401
1415
|
});
|
|
1402
1416
|
this.onChange?.(this.value());
|
|
1403
1417
|
if (putHistory) {
|
|
1404
|
-
this.tools.putHistory(this.value());
|
|
1418
|
+
this.tools.putHistory(this.value(), e.historyDesc ?? "未知变更");
|
|
1405
1419
|
}
|
|
1406
1420
|
}
|
|
1407
1421
|
render(value) {
|
|
@@ -1423,7 +1437,7 @@ class Design extends ValueAccess {
|
|
|
1423
1437
|
this.settingOptionsNodeId = optionsNode.id;
|
|
1424
1438
|
this.preview.selectByNodeIds([this.settingOptionsNodeId]);
|
|
1425
1439
|
this.tree.selectByNodeIds([this.settingOptionsNodeId]);
|
|
1426
|
-
this.changeSubject.next(
|
|
1440
|
+
this.changeSubject.next({ historyDesc: `设置属性${optionsNode.name}` });
|
|
1427
1441
|
}
|
|
1428
1442
|
}
|
|
1429
1443
|
}
|
|
@@ -1470,7 +1484,7 @@ class Design extends ValueAccess {
|
|
|
1470
1484
|
else if (this.settingOptionsNodeId) {
|
|
1471
1485
|
const oldNode = this.optionsNodes.get(this.settingOptionsNodeId);
|
|
1472
1486
|
const newNode = this.optionsNodes.get(nodeId);
|
|
1473
|
-
if (oldNode.parentId == newNode.parentId && oldNode.settingType == newNode.settingType) {
|
|
1487
|
+
if (oldNode && oldNode.parentId == newNode.parentId && oldNode.settingType == newNode.settingType) {
|
|
1474
1488
|
this.settingOptionsNodeId = nodeId;
|
|
1475
1489
|
this.settingOptionsStr.set(JSON.stringify(newNode.options, null, " "));
|
|
1476
1490
|
this.settingRef?.instance.writeValue(newNode.options);
|
|
@@ -1570,8 +1584,8 @@ class Design extends ValueAccess {
|
|
|
1570
1584
|
this.menu.clear();
|
|
1571
1585
|
const ref = this.menu.createComponent(node.contextMenu, { injector: injector });
|
|
1572
1586
|
ref.instance.contextMenu(e);
|
|
1573
|
-
ref.instance.onChange = (
|
|
1574
|
-
this.onChangeOptionsConfig(
|
|
1587
|
+
ref.instance.onChange = async (e) => {
|
|
1588
|
+
this.onChangeOptionsConfig(e);
|
|
1575
1589
|
};
|
|
1576
1590
|
}
|
|
1577
1591
|
}
|
|
@@ -1627,11 +1641,11 @@ class Design extends ValueAccess {
|
|
|
1627
1641
|
nodes.push(optionsNode);
|
|
1628
1642
|
this.optionsNodes.set(optionsNode.id, optionsNode);
|
|
1629
1643
|
}
|
|
1630
|
-
this.tree.addNodeForSelected(nodes);
|
|
1644
|
+
this.tree.addNodeForSelected(nodes, undefined, `粘贴${nodes.length}个组件}`);
|
|
1631
1645
|
}
|
|
1632
1646
|
onNodesMove(nodeIds) {
|
|
1633
1647
|
if (this.tree.selectListSelection.selected.length == 1) {
|
|
1634
|
-
this.tree.addNodeForSelected(nodeIds.map(id => this.optionsNodes.get(id)), true);
|
|
1648
|
+
this.tree.addNodeForSelected(nodeIds.map(id => this.optionsNodes.get(id)), true, `粘贴${nodeIds.length}个组件}`);
|
|
1635
1649
|
}
|
|
1636
1650
|
}
|
|
1637
1651
|
onEditorChange(optionsStr) {
|
|
@@ -1707,14 +1721,14 @@ class Design extends ValueAccess {
|
|
|
1707
1721
|
}
|
|
1708
1722
|
}
|
|
1709
1723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Design, isStandalone: true, selector: "axis-design", inputs: { chooseComponentVisible: { classPropertyName: "chooseComponentVisible", publicName: "chooseComponentVisible", isSignal: true, isRequired: false, transformFunction: null }, settingOptionsStr: { classPropertyName: "settingOptionsStr", publicName: "settingOptionsStr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chooseComponentVisible: "chooseComponentVisibleChange", settingOptionsStr: "settingOptionsStrChange" }, host: { attributes: { "tabindex": "-1", "autofocus": "true" }, listeners: { "keydown": "onKeyPress($event)" } }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "setting", first: true, predicate: ["setting"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "preview", first: true, predicate: ["preview"], descendants: true, static: true }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "codeEditor", first: true, predicate: ["codeEditor"], descendants: true }, { propertyName: "tools", first: true, predicate: ["tools"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\">\n <nz-tabs nzCentered>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n </nz-tab>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n <nz-splitter-panel>\n <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n <axis-toolbar #tools></axis-toolbar>\n <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig()\"\n (onSelect)=\"onPreviewSelect($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n </div>\n </nz-splitter-panel>\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n <nz-tabs nzCentered style=\"height: 100%;\">\n <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n <ng-container #setting></ng-container>\n @if (!settingOptionsStr()){\n <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n }\n </nz-tab>\n <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n <ng-container #codeEditor=\"axisDynamic\"\n [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n <ng-container *nzDrawerContent>\n <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: NzSplitterModule }, { kind: "component", type: i1$3.NzSplitterComponent, selector: "nz-splitter", inputs: ["nzLayout", "nzLazy"], outputs: ["nzResizeStart", "nzResize", "nzResizeEnd"], exportAs: ["nzSplitter"] }, { kind: "component", type: i1$3.NzSplitterPanelComponent, selector: "nz-splitter-panel", inputs: ["nzDefaultSize", "nzMin", "nzMax", "nzSize", "nzCollapsible", "nzResizable"], exportAs: ["nzSplitterPanel"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i2$3.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i2$3.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: Preview, selector: "axis-design-preview", inputs: ["loadAndOptions", "optionsNodes", "injectData"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "component", type: Tree, selector: "axis-design-tree", inputs: ["node", "optionsNodes"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: Cmplib, selector: "axis-cmplib", inputs: ["cmplib", "selectMode", "tags"], outputs: ["cmplibChange", "clickExample", "dragStart", "dragEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i10.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "directive", type: DynamicDirective, selector: "[axisDynamic]", inputs: ["axisDynamic", "standalone", "isDesign"], exportAs: ["axisDynamic"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i6$2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i6$2.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "component", type: Toolbar, selector: "axis-toolbar", inputs: ["shortcutKeysModal"], outputs: ["shortcutKeysModalChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1724
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: Design, isStandalone: true, selector: "axis-design", inputs: { chooseComponentVisible: { classPropertyName: "chooseComponentVisible", publicName: "chooseComponentVisible", isSignal: true, isRequired: false, transformFunction: null }, settingOptionsStr: { classPropertyName: "settingOptionsStr", publicName: "settingOptionsStr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chooseComponentVisible: "chooseComponentVisibleChange", settingOptionsStr: "settingOptionsStrChange" }, host: { attributes: { "tabindex": "-1", "autofocus": "true" }, listeners: { "keydown": "onKeyPress($event)" } }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "setting", first: true, predicate: ["setting"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "preview", first: true, predicate: ["preview"], descendants: true, static: true }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "codeEditor", first: true, predicate: ["codeEditor"], descendants: true }, { propertyName: "tools", first: true, predicate: ["tools"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\">\n <nz-tabs nzCentered>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n </nz-tab>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n <nz-splitter-panel>\n <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n <axis-toolbar #tools></axis-toolbar>\n <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onSelect)=\"onPreviewSelect($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n </div>\n </nz-splitter-panel>\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n <nz-tabs nzCentered style=\"height: 100%;\">\n <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n <ng-container #setting></ng-container>\n @if (!settingOptionsStr()){\n <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n }\n </nz-tab>\n <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n <ng-container #codeEditor=\"axisDynamic\"\n [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n <ng-container *nzDrawerContent>\n <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: NzSplitterModule }, { kind: "component", type: i1$3.NzSplitterComponent, selector: "nz-splitter", inputs: ["nzLayout", "nzLazy"], outputs: ["nzResizeStart", "nzResize", "nzResizeEnd"], exportAs: ["nzSplitter"] }, { kind: "component", type: i1$3.NzSplitterPanelComponent, selector: "nz-splitter-panel", inputs: ["nzDefaultSize", "nzMin", "nzMax", "nzSize", "nzCollapsible", "nzResizable"], exportAs: ["nzSplitterPanel"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i2$3.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i2$3.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: Preview, selector: "axis-design-preview", inputs: ["loadAndOptions", "optionsNodes", "injectData"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "component", type: Tree, selector: "axis-design-tree", inputs: ["node", "optionsNodes"], outputs: ["onChange", "onSelect", "onContextMenu"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$1.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: Cmplib, selector: "axis-cmplib", inputs: ["cmplib", "selectMode", "tags"], outputs: ["cmplibChange", "clickExample", "dragStart", "dragEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i10.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "directive", type: DynamicDirective, selector: "[axisDynamic]", inputs: ["axisDynamic", "standalone", "isDesign"], exportAs: ["axisDynamic"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i6$2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i6$2.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "component", type: Toolbar, selector: "axis-toolbar", inputs: ["shortcutKeysModal"], outputs: ["shortcutKeysModalChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1711
1725
|
}
|
|
1712
1726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, decorators: [{
|
|
1713
1727
|
type: Component,
|
|
1714
1728
|
args: [{ selector: 'axis-design', imports: [NzSplitterModule, NzTabsModule, Preview, Tree, NzFlexModule, Cmplib, FormsModule, NzEmptyModule, DynamicDirective, NzDrawerModule, Toolbar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1715
1729
|
tabindex: "-1",
|
|
1716
1730
|
autofocus: "true",
|
|
1717
|
-
}, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\">\n <nz-tabs nzCentered>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n </nz-tab>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n <nz-splitter-panel>\n <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n <axis-toolbar #tools></axis-toolbar>\n <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig()\"\n (onSelect)=\"onPreviewSelect($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n </div>\n </nz-splitter-panel>\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n <nz-tabs nzCentered style=\"height: 100%;\">\n <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n <ng-container #setting></ng-container>\n @if (!settingOptionsStr()){\n <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n }\n </nz-tab>\n <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n <ng-container #codeEditor=\"axisDynamic\"\n [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n <ng-container *nzDrawerContent>\n <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"] }]
|
|
1731
|
+
}, template: "<nz-splitter (nzResize)=\"layoutEditor($event)\">\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[0]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\">\n <nz-tabs nzCentered>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u6811\">\n <axis-design-tree #tree [node]=\"treeNode()\" [optionsNodes]=\"optionsNodes\"\n (onSelect)=\"onTreeSelect($event)\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-tree>\n </nz-tab>\n <nz-tab nzTitle=\"\u7EC4\u4EF6\u5E93\">\n <axis-cmplib selectMode=\"drag\" (dragStart)=\"onCmplibDragStart($event.example,$event.element)\"\n (dragEnd)=\"onCmplibDragEnd()\"></axis-cmplib>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n <nz-splitter-panel>\n <div nz-flex nzVertical style=\"height: 100%;width: 100%;position: relative;\">\n <h2 style=\"text-align: center;margin-top: 4px;\">\u9884\u89C8</h2>\n <axis-toolbar #tools></axis-toolbar>\n <axis-design-preview #preview style=\"flex:1;overflow: auto;\" [loadAndOptions]=\"loadAndOptions()\"\n [optionsNodes]=\"optionsNodes\" [injectData]=\"injectDataObs\" (onChange)=\"onChangeOptionsConfig($event)\"\n (onSelect)=\"onPreviewSelect($event)\"\n (onContextMenu)=\"onContextMenu($event.event,$event.nodeId)\"></axis-design-preview>\n </div>\n </nz-splitter-panel>\n <nz-splitter-panel [nzCollapsible]=\"!tools.onlyPreview()\" [nzDefaultSize]=\"cacheSized[1]\" nzMin=\"15%\" nzMax=\"40%\"\n [nzSize]=\"tools.onlyPreview()?0:undefined\" style=\"position: relative;\">\n <nz-tabs nzCentered style=\"height: 100%;\">\n <nz-tab nzTitle=\"\u5C5E\u6027\u8BBE\u7F6E\" (nzClick)=\"syncToSetting()\">\n <ng-container #setting></ng-container>\n @if (!settingOptionsStr()){\n <nz-empty style=\"height: 300px;\" nzNotFoundContent=\"\u8BF7\u5148\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\"></nz-empty>\n }\n </nz-tab>\n <nz-tab nzTitle=\"\u4EE3\u7801\" nzForceRender (nzSelect)=\"syncToCode();\">\n <ng-container #codeEditor=\"axisDynamic\"\n [axisDynamic]=\"{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}\"\n [standalone]=\"true\" [(ngModel)]=\"settingOptionsStr\"\n (ngModelChange)=\"onEditorChange($event)\"></ng-container>\n </nz-tab>\n </nz-tabs>\n </nz-splitter-panel>\n</nz-splitter>\n<ng-container #menu></ng-container>\n<nz-drawer [(nzVisible)]=\"chooseComponentVisible\" nzTitle=\"\u9009\u62E9\u7EC4\u4EF6\" [nzBodyStyle]=\"{padding:0}\"\n (nzOnClose)=\"chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)\">\n <ng-container *nzDrawerContent>\n <axis-cmplib selectMode=\"click\" [tags]=\"chooseComponentTags()\"\n (clickExample)=\"chooseComponentVisible.set(false);chooseComponentSubject.next($event)\"></axis-cmplib>\n </ng-container>\n</nz-drawer>", styles: ["nz-tabs,::ng-deep .ant-tabs-content,::ng-deep .ant-tabs-tabpane{height:100%}::ng-deep .ant-tabs-content{overflow:auto}:host{display:block;width:100%;height:100%}\n"] }]
|
|
1718
1732
|
}], ctorParameters: () => [], propDecorators: { menu: [{
|
|
1719
1733
|
type: ViewChild,
|
|
1720
1734
|
args: ["menu", { static: true, read: ViewContainerRef }]
|