Skip to content

Commit

Permalink
feat: 添加setting-form组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheBeard30
TheBeard30 committed Apr 13, 2024
1 parent 3659983 commit 5fe9f97
Show file tree
Hide file tree
Showing 14 changed files with 521 additions and 111 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"@delon/form": "^17.3.1",
"@formily/reactive": "^2.3.1",
"jsonpath-plus": "^8.0.0",
"lodash": "^4.17.21",
Expand Down
256 changes: 240 additions & 16 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/app/components/icons/icon.register.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { RecoverSvg } from '@/app/components/icons/recover';
import { MenuSvg } from '@/app/components/icons/menu';
import { DragMoveSvg } from '@/app/components/icons/dragmove';
import { EyeCloseSvg, EyeSvg } from '@/app/components/icons/eyes';
import { PositionSvg } from '@/app/components/icons/position';

export class IconRegister extends IconFactory {
constructor() {
Expand Down Expand Up @@ -78,5 +79,6 @@ export class IconRegister extends IconFactory {
this.register(IconType.DragMove, DragMoveSvg);
this.register(IconType.Eye, EyeSvg);
this.register(IconType.EyeClose, EyeCloseSvg);
this.register(IconType.Position, PositionSvg);
}
}
3 changes: 2 additions & 1 deletion src/app/components/icons/icon.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,6 @@ export enum IconType {
Menu = 'Menu',
DragMove = 'DragMove',
Eye = 'Eye',
EyeClose = 'EyeClose'
EyeClose = 'EyeClose',
Position = 'Position'
}
26 changes: 26 additions & 0 deletions src/app/components/icons/position.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
selector: 'app-position-svg',
standalone: true,
template: `
<svg
viewBox="0 0 1024 1024"
[attr.width]="width"
[attr.height]="height"
fill="currentColor"
focusable="false"
aria-hidden="true"
>
<path
d="M872,885 C893.879,885 911.64158,902.54379 911.994644,924.338274 L912,925 C912,947.1 894.1,965 872,965 L152,965 C130.121,965 112.35842,947.45621 112.005356,925.661726 L112,925 C112,902.9 129.9,885 152,885 L872,885 Z M512,60 C555.2,60 597.2,68.5 636.7,85.2 C674.8,101.3 709.1,124.4 738.5,153.8 C767.9,183.2 791,217.5 807.1,255.6 C823.8,295.1 832.3,337.1 832.3,380.3 C832.3,496.1 739.4,640.1 539.8,833.4 L512,860.3 L484.2,833.3 C284.6,640.1 191.7,496.1 191.7,380.3 C191.7,337.1 200.2,295.1 216.9,255.6 C233,217.5 256.1,183.2 285.5,153.8 C314.9,124.4 349.2,101.3 387.3,85.2 C426.8,68.5 468.8,60 512,60 Z M512,140 C447.8,140 387.5,165 342.1,210.4 C296.7,255.8 271.7,316.1 271.7,380.3 C271.7,424.4 293.5,479.4 336.5,543.8 C376.8,604 434.3,671.2 512,748.6 C589.6,671.2 647.2,604 687.5,543.8 C730.5,479.5 752.3,424.5 752.3,380.3 C752.3,316.1 727.3,255.8 681.9,210.4 C636.5,165 576.2,140 512,140 Z M512,228 C600.2,228 672,299.8 672,388 C672,476.2 600.2,548 512,548 C423.8,548 352,476.2 352,388 C352,299.8 423.8,228 512,228 Z M512,308 C467.9,308 432,343.9 432,388 C432,432.1 467.9,468 512,468 C556.1,468 592,432.1 592,388 C592,343.9 556.1,308 512,308 Z"
></path>
</svg>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PositionSvg {
@Input() width: string | number = '1em';

@Input() height: string | number = '1em';
}
19 changes: 19 additions & 0 deletions src/app/components/widgets/node-path/node-path.widget.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@import 'ng-zorro-antd/style/themes/default.less';
@import '../../../../theme/variables.less';

.@{prefix-cls}-node-path {
padding: 4px 10px !important;
border-bottom: 1px solid var(--dn-panel-border-color);

.@{prefix-cls}-icon {
font-size: 11px;
}

.@{ant-prefix}-breadcrumb-separator {
margin: 0 4px !important;
}

a {
font-size: 12px;
}
}
63 changes: 63 additions & 0 deletions src/app/components/widgets/node-path/node-path.widget.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { usePrefix } from '@/app/utils';
import { HookService } from '@/app/services/hook.service';
import { Selection, TreeNode } from '@/app/core/models';
import { Hover } from '@/app/core/models/hover';
import { SharedModule } from '@/app/shared/shared.module';
import { IconWidget } from '@/app/components/widgets/icon/icon.widget';
import { NodeTitleWidget } from '@/app/components/widgets/node-title/node-title.widget';

@Component({
selector: 'app-node-path',
template: `
@if (selected) {
<nz-breadcrumb class="{{ prefix }}">
@for (node of nodes; track node; let key = $index) {
<nz-breadcrumb-item>
@if (key === 0) {
<app-icon icon="Position" [style]="{ marginRight: '3px' }"></app-icon>
}
<a href="">
<app-node-title-widget [node]="node"></app-node-title-widget>
</a>
</nz-breadcrumb-item>
<br />
}
</nz-breadcrumb>
}
`,
standalone: true,
imports: [SharedModule, IconWidget, NodeTitleWidget],
styleUrls: ['./node-path.widget.less']
})
export class NodePathWidget implements OnChanges {
prefix = usePrefix('node-path');

@Input() workspaceId: string;

@Input() maxItems: number;

selection: Selection;

selected: TreeNode;

hover: Hover;

nodes: TreeNode[] = [];

constructor(private hookService: HookService) {}

ngOnChanges(changes: SimpleChanges): void {
if (changes.workspaceId && changes.workspaceId.currentValue) {
this.selected = this.hookService.useSelectedNode(this.workspaceId);
this.selection = this.hookService.useSelection(this.workspaceId);
this.hover = this.hookService.useHover(this.workspaceId);
const maxItems = this.maxItems ?? 3;
this.nodes = this.selected
.getParents()
.slice(0, maxItems - 1)
.reverse()
.concat(this.selected);
}
}
}
2 changes: 1 addition & 1 deletion src/app/components/widgets/outline/outline-node.widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export class OutlineNodeWidget implements OnChanges, AfterViewInit {
ngAfterViewInit(): void {
autorun(() => {
const selectedIds = this.selection?.selected || [];
const id = this.node.id;
const id = this.node?.id;
const element = this.container.nativeElement;
if (!element) return;
if (selectedIds.includes(id)) {
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/widgets/tree-node/tree-node.widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export class TreeNodeWidget implements OnChanges, AfterViewInit, OnDestroy {
const name = this.node.componentName;
this.component = this.factory.get(name);
setTimeout(() => {
this.container.clear();
this.container?.clear();
const options = {} as any;
if (this.children?.nativeElement) {
options['projectableNodes'] = [[this.children.nativeElement.content]];
Expand Down
172 changes: 88 additions & 84 deletions src/app/pages/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ import { IconRegister } from '@/app/components/icons/icon.register';
import { ViewToolsWidget } from '@/app/components/widgets/view-tools/view-tools.widget';
import { ViewPanelComponent } from '@/app/components/panels/view-panel.component';
import { ViewportPanelComponent } from '@/app/components/panels/viewport-panel.component';
import { SettingsFormComponent } from '@/app/settings-form/settings-form.component';
import { ComponentTreeWidget } from '@/app/components/widgets/component-tree/component-tree.widget';
import { OutlineWidget } from '@/app/components/widgets/outline/outline.widget';
import { HistoryWidget } from '@/app/components/widgets/history/history.widget';
import { SettingsFormModule } from '@/app/settings-form/settings-form.module';

@Component({
selector: 'app-home',
Expand All @@ -43,10 +43,10 @@ import { HistoryWidget } from '@/app/components/widgets/history/history.widget';
ViewToolsWidget,
ViewPanelComponent,
ViewportPanelComponent,
SettingsFormComponent,
ComponentTreeWidget,
OutlineWidget,
HistoryWidget
HistoryWidget,
SettingsFormModule
],
providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider],
templateUrl: './home.component.html',
Expand Down Expand Up @@ -115,89 +115,93 @@ export class HomeComponent implements OnInit {
designerProps: {
propsSchema: {
type: 'object',
$namespace: 'Field',
// $namespace: 'Field',
properties: {
'field-properties': {
type: 'void',
'x-component': 'CollapseItem',
title: '字段属性',
properties: {
title: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input'
},

hidden: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Switch'
},
default: {
'x-decorator': 'FormItem',
'x-component': 'ValueInput'
},
test: {
type: 'void',
title: '测试',
'x-decorator': 'FormItem',
'x-component': 'DrawerSetter',
'x-component-props': {
text: '打开抽屉'
},
properties: {
test: {
type: 'string',
title: '测试输入',
'x-decorator': 'FormItem',
'x-component': 'Input'
}
}
}
}
},

'component-styles': {
type: 'void',
title: '样式',
'x-component': 'CollapseItem',
properties: {
'style.width': {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'SizeInput'
},
'style.height': {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'SizeInput'
},
'style.display': {
'x-component': 'DisplayStyleSetter'
},
'style.background': {
'x-component': 'BackgroundStyleSetter'
},
'style.boxShadow': {
'x-component': 'BoxShadowStyleSetter'
},
'style.font': {
'x-component': 'FontStyleSetter'
},
'style.margin': {
'x-component': 'BoxStyleSetter'
},
'style.padding': {
'x-component': 'BoxStyleSetter'
},
'style.borderRadius': {
'x-component': 'BorderRadiusStyleSetter'
},
'style.border': {
'x-component': 'BorderStyleSetter'
}
}
title: {
title: '标题',
type: 'string'
}
// 'field-properties': {
// type: 'void',
// 'x-component': 'CollapseItem',
// title: '字段属性',
// properties: {
// title: {
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'Input'
// },
//
// hidden: {
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'Switch'
// },
// default: {
// 'x-decorator': 'FormItem',
// 'x-component': 'ValueInput'
// },
// test: {
// type: 'void',
// title: '测试',
// 'x-decorator': 'FormItem',
// 'x-component': 'DrawerSetter',
// 'x-component-props': {
// text: '打开抽屉'
// },
// properties: {
// test: {
// type: 'string',
// title: '测试输入',
// 'x-decorator': 'FormItem',
// 'x-component': 'Input'
// }
// }
// }
// }
// },
//
// 'component-styles': {
// type: 'void',
// title: '样式',
// 'x-component': 'CollapseItem',
// properties: {
// 'style.width': {
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'SizeInput'
// },
// 'style.height': {
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'SizeInput'
// },
// 'style.display': {
// 'x-component': 'DisplayStyleSetter'
// },
// 'style.background': {
// 'x-component': 'BackgroundStyleSetter'
// },
// 'style.boxShadow': {
// 'x-component': 'BoxShadowStyleSetter'
// },
// 'style.font': {
// 'x-component': 'FontStyleSetter'
// },
// 'style.margin': {
// 'x-component': 'BoxStyleSetter'
// },
// 'style.padding': {
// 'x-component': 'BoxStyleSetter'
// },
// 'style.borderRadius': {
// 'x-component': 'BorderRadiusStyleSetter'
// },
// 'style.border': {
// 'x-component': 'BorderStyleSetter'
// }
// }
// }
}
}
},
Expand Down
11 changes: 11 additions & 0 deletions src/app/services/hook.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,15 @@ export class HookService {
const operation = this.useOperation(workspaceId);
return operation?.hover;
}

useSelected(workspaceId?: string) {
const selection = this.useSelection(workspaceId);
return selection?.selected || [];
}

useSelectedNode(workspaceId?: string) {
const selected = this.useSelected(workspaceId);
const tree = this.useTree(workspaceId);
return tree?.findById(selected[0]);
}
}
Loading

0 comments on commit 5fe9f97

Please sign in to comment.