ngx-axis-appforge 0.0.7 → 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 -17
- 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 +38 -44
- 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 +10 -7
- package/fesm2022/ngx-axis-appforge-core.mjs.map +1 -1
- package/package.json +72 -72
|
@@ -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()), ...(ngDevMode ? [{ debugName: "dragdrop" }] : []));
|
|
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();
|
|
@@ -355,7 +355,7 @@ class Tree {
|
|
|
355
355
|
this.onChange.emit({ value: next, nextNodeId: nextNodeId });
|
|
356
356
|
}
|
|
357
357
|
}
|
|
358
|
-
addNodeForSelected(nodes, deleteSuccess = false) {
|
|
358
|
+
addNodeForSelected(nodes, deleteSuccess = false, historyDesc) {
|
|
359
359
|
if (nodes.length && this.selectListSelection.selected) {
|
|
360
360
|
for (const nodeId of this.selectListSelection.selected) {
|
|
361
361
|
const parentNode = this.optionsNodes().get(nodeId);
|
|
@@ -373,7 +373,7 @@ class Tree {
|
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
|
-
this.onChange.emit();
|
|
376
|
+
this.onChange.emit({ historyDesc });
|
|
377
377
|
}
|
|
378
378
|
}
|
|
379
379
|
deleteNode(node) {
|
|
@@ -574,7 +574,7 @@ class DragService {
|
|
|
574
574
|
const dragNode = this.getOptionsNode(this.dragEn);
|
|
575
575
|
let targetIndex = this.dropHandler.beforeElement ? this.preview.getNodeByElement(this.dropHandler.beforeElement)?.indexOfParentObj : dropNode?.defaultDropIndex;
|
|
576
576
|
if (dropNode.dropObj == dragNode.parentObj && dragNode.indexOfParentObj == targetIndex) {
|
|
577
|
-
this.preview.onDragEnd(
|
|
577
|
+
this.preview.onDragEnd({ historyDesc: `拖拽${dragNode.name}` });
|
|
578
578
|
}
|
|
579
579
|
else {
|
|
580
580
|
dragId = dragNode?.id;
|
|
@@ -596,13 +596,13 @@ class DragService {
|
|
|
596
596
|
else {
|
|
597
597
|
dropNode.dropObj[targetIndex] = dragObj;
|
|
598
598
|
}
|
|
599
|
-
this.preview.onDragEnd(
|
|
599
|
+
this.preview.onDragEnd({ historyDesc: `拖拽${dragNode.name}` });
|
|
600
600
|
}
|
|
601
601
|
this.dropHandler.onDragEnd();
|
|
602
602
|
this.dropHandler = undefined;
|
|
603
603
|
}
|
|
604
604
|
else {
|
|
605
|
-
this.preview.onDragEnd(
|
|
605
|
+
this.preview.onDragEnd();
|
|
606
606
|
}
|
|
607
607
|
this.dragEn.element.style.display = this.oriDragDisplay;
|
|
608
608
|
this.dragEn = undefined;
|
|
@@ -853,9 +853,9 @@ class Preview {
|
|
|
853
853
|
onDragStart() {
|
|
854
854
|
this.selectService.disableHover();
|
|
855
855
|
}
|
|
856
|
-
onDragEnd(
|
|
857
|
-
if (
|
|
858
|
-
this.onChange.emit();
|
|
856
|
+
onDragEnd(e) {
|
|
857
|
+
if (e) {
|
|
858
|
+
this.onChange.emit(e);
|
|
859
859
|
}
|
|
860
860
|
this.selectService.enableHover();
|
|
861
861
|
}
|
|
@@ -1117,6 +1117,7 @@ class ShortcutKey {
|
|
|
1117
1117
|
switch (event) {
|
|
1118
1118
|
case "delete":
|
|
1119
1119
|
this.design.tree.removeSelected();
|
|
1120
|
+
this.design.element.nativeElement.focus();
|
|
1120
1121
|
break;
|
|
1121
1122
|
case "undo":
|
|
1122
1123
|
this.design.tools.undo();
|
|
@@ -1239,12 +1240,12 @@ class Toolbar {
|
|
|
1239
1240
|
shortcutKeysModal = model(false, ...(ngDevMode ? [{ debugName: "shortcutKeysModal" }] : []));
|
|
1240
1241
|
history = [];
|
|
1241
1242
|
historyIndex = 0;
|
|
1242
|
-
putHistory(options) {
|
|
1243
|
+
putHistory(options, desc) {
|
|
1243
1244
|
if (this.historyIndex > 0) {
|
|
1244
1245
|
this.history.splice(0, this.historyIndex);
|
|
1245
1246
|
this.historyIndex = 0;
|
|
1246
1247
|
}
|
|
1247
|
-
this.history.unshift({ options: copy(options, true), time: new Date() });
|
|
1248
|
+
this.history.unshift({ options: copy(options, true), time: new Date(), desc });
|
|
1248
1249
|
if (this.history.length > 50) {
|
|
1249
1250
|
this.history.pop();
|
|
1250
1251
|
}
|
|
@@ -1253,30 +1254,30 @@ class Toolbar {
|
|
|
1253
1254
|
undo() {
|
|
1254
1255
|
if (this.historyIndex < this.history.length - 1) {
|
|
1255
1256
|
this.historyIndex++;
|
|
1256
|
-
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 });
|
|
1257
1258
|
this.cdr.markForCheck();
|
|
1258
1259
|
}
|
|
1259
1260
|
}
|
|
1260
1261
|
redo() {
|
|
1261
1262
|
if (this.historyIndex > 0) {
|
|
1262
1263
|
this.historyIndex--;
|
|
1263
|
-
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 });
|
|
1264
1265
|
this.cdr.markForCheck();
|
|
1265
1266
|
}
|
|
1266
1267
|
}
|
|
1267
1268
|
switchHistory(index) {
|
|
1268
1269
|
if (index != this.historyIndex && index > -1 && index < this.history.length) {
|
|
1269
1270
|
this.historyIndex = index;
|
|
1270
|
-
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 });
|
|
1271
1272
|
this.cdr.markForCheck();
|
|
1272
1273
|
}
|
|
1273
1274
|
}
|
|
1274
1275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1275
|
-
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 });
|
|
1276
1277
|
}
|
|
1277
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Toolbar, decorators: [{
|
|
1278
1279
|
type: Component,
|
|
1279
|
-
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"] }]
|
|
1280
1281
|
}] });
|
|
1281
1282
|
|
|
1282
1283
|
class Design extends ValueAccess {
|
|
@@ -1287,6 +1288,7 @@ class Design extends ValueAccess {
|
|
|
1287
1288
|
.subscribe((value) => this.onChangeOptionsConfig(value)));
|
|
1288
1289
|
}
|
|
1289
1290
|
options = new DesignOptions();
|
|
1291
|
+
element = inject(ElementRef);
|
|
1290
1292
|
clipboard = inject(ClipboardService);
|
|
1291
1293
|
loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
|
|
1292
1294
|
injectDataObs = toObservable(this.options.injectData);
|
|
@@ -1319,12 +1321,12 @@ class Design extends ValueAccess {
|
|
|
1319
1321
|
changeSubject = new Subject();
|
|
1320
1322
|
setInitValue(value) {
|
|
1321
1323
|
super.setInitValue(value);
|
|
1322
|
-
this.tools.putHistory(value);
|
|
1324
|
+
this.tools.putHistory(value, "初始化");
|
|
1323
1325
|
this.render(value);
|
|
1324
1326
|
}
|
|
1325
1327
|
writeValue(value) {
|
|
1326
1328
|
super.writeValue(value);
|
|
1327
|
-
this.tools.putHistory(value);
|
|
1329
|
+
this.tools.putHistory(value, "初始化");
|
|
1328
1330
|
this.render(value);
|
|
1329
1331
|
}
|
|
1330
1332
|
async inspect(nextInfo) {
|
|
@@ -1388,13 +1390,15 @@ class Design extends ValueAccess {
|
|
|
1388
1390
|
}
|
|
1389
1391
|
return res?.treeNode;
|
|
1390
1392
|
}
|
|
1391
|
-
onChangeOptionsConfig(
|
|
1393
|
+
onChangeOptionsConfig(e) {
|
|
1392
1394
|
this.reset();
|
|
1395
|
+
let value = e.value;
|
|
1393
1396
|
if (value === undefined) {
|
|
1394
1397
|
value = this.value();
|
|
1395
1398
|
}
|
|
1396
1399
|
this.value.set(copy(value, true));
|
|
1397
1400
|
this.render(this.value());
|
|
1401
|
+
const putHistory = e.putHistory ?? true;
|
|
1398
1402
|
this.loadAndOptions()?.[0].then(() => {
|
|
1399
1403
|
if (!putHistory && this.settingOptionsNodeId) {
|
|
1400
1404
|
const node = this.optionsNodes.get(this.settingOptionsNodeId);
|
|
@@ -1403,10 +1407,15 @@ class Design extends ValueAccess {
|
|
|
1403
1407
|
}
|
|
1404
1408
|
this.syncToCode();
|
|
1405
1409
|
}
|
|
1410
|
+
if (e.nextNodeId) {
|
|
1411
|
+
this.tree.selectByNodeIds([e.nextNodeId]);
|
|
1412
|
+
this.preview.selectByNodeIds([e.nextNodeId]);
|
|
1413
|
+
this.loadSetting(e.nextNodeId);
|
|
1414
|
+
}
|
|
1406
1415
|
});
|
|
1407
1416
|
this.onChange?.(this.value());
|
|
1408
1417
|
if (putHistory) {
|
|
1409
|
-
this.tools.putHistory(this.value());
|
|
1418
|
+
this.tools.putHistory(this.value(), e.historyDesc ?? "未知变更");
|
|
1410
1419
|
}
|
|
1411
1420
|
}
|
|
1412
1421
|
render(value) {
|
|
@@ -1428,7 +1437,7 @@ class Design extends ValueAccess {
|
|
|
1428
1437
|
this.settingOptionsNodeId = optionsNode.id;
|
|
1429
1438
|
this.preview.selectByNodeIds([this.settingOptionsNodeId]);
|
|
1430
1439
|
this.tree.selectByNodeIds([this.settingOptionsNodeId]);
|
|
1431
|
-
this.changeSubject.next(
|
|
1440
|
+
this.changeSubject.next({ historyDesc: `设置属性${optionsNode.name}` });
|
|
1432
1441
|
}
|
|
1433
1442
|
}
|
|
1434
1443
|
}
|
|
@@ -1575,26 +1584,11 @@ class Design extends ValueAccess {
|
|
|
1575
1584
|
this.menu.clear();
|
|
1576
1585
|
const ref = this.menu.createComponent(node.contextMenu, { injector: injector });
|
|
1577
1586
|
ref.instance.contextMenu(e);
|
|
1578
|
-
ref.instance.onChange = async (
|
|
1579
|
-
this.onChangeOptionsConfig(
|
|
1580
|
-
if (nextNodeId) {
|
|
1581
|
-
await this.loadAndOptions()[0];
|
|
1582
|
-
this.tree.selectByNodeIds([nextNodeId]);
|
|
1583
|
-
this.preview.selectByNodeIds([nextNodeId]);
|
|
1584
|
-
this.loadSetting(nextNodeId);
|
|
1585
|
-
}
|
|
1587
|
+
ref.instance.onChange = async (e) => {
|
|
1588
|
+
this.onChangeOptionsConfig(e);
|
|
1586
1589
|
};
|
|
1587
1590
|
}
|
|
1588
1591
|
}
|
|
1589
|
-
async onTreeChange(e) {
|
|
1590
|
-
this.onChangeOptionsConfig(e?.value);
|
|
1591
|
-
if (e?.nextNodeId) {
|
|
1592
|
-
await this.loadAndOptions()[0];
|
|
1593
|
-
this.tree.selectByNodeIds([e.nextNodeId]);
|
|
1594
|
-
this.preview.selectByNodeIds([e.nextNodeId]);
|
|
1595
|
-
this.loadSetting(e.nextNodeId);
|
|
1596
|
-
}
|
|
1597
|
-
}
|
|
1598
1592
|
chooseComponent(...tags) {
|
|
1599
1593
|
this.chooseComponentTags.set(tags);
|
|
1600
1594
|
this.chooseComponentVisible.set(true);
|
|
@@ -1647,11 +1641,11 @@ class Design extends ValueAccess {
|
|
|
1647
1641
|
nodes.push(optionsNode);
|
|
1648
1642
|
this.optionsNodes.set(optionsNode.id, optionsNode);
|
|
1649
1643
|
}
|
|
1650
|
-
this.tree.addNodeForSelected(nodes);
|
|
1644
|
+
this.tree.addNodeForSelected(nodes, undefined, `粘贴${nodes.length}个组件}`);
|
|
1651
1645
|
}
|
|
1652
1646
|
onNodesMove(nodeIds) {
|
|
1653
1647
|
if (this.tree.selectListSelection.selected.length == 1) {
|
|
1654
|
-
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}个组件}`);
|
|
1655
1649
|
}
|
|
1656
1650
|
}
|
|
1657
1651
|
onEditorChange(optionsStr) {
|
|
@@ -1727,14 +1721,14 @@ class Design extends ValueAccess {
|
|
|
1727
1721
|
}
|
|
1728
1722
|
}
|
|
1729
1723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1730
|
-
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)=\"
|
|
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 });
|
|
1731
1725
|
}
|
|
1732
1726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: Design, decorators: [{
|
|
1733
1727
|
type: Component,
|
|
1734
1728
|
args: [{ selector: 'axis-design', imports: [NzSplitterModule, NzTabsModule, Preview, Tree, NzFlexModule, Cmplib, FormsModule, NzEmptyModule, DynamicDirective, NzDrawerModule, Toolbar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1735
1729
|
tabindex: "-1",
|
|
1736
1730
|
autofocus: "true",
|
|
1737
|
-
}, 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)=\"
|
|
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"] }]
|
|
1738
1732
|
}], ctorParameters: () => [], propDecorators: { menu: [{
|
|
1739
1733
|
type: ViewChild,
|
|
1740
1734
|
args: ["menu", { static: true, read: ViewContainerRef }]
|