ngx-axis-appforge 0.0.0

package/axis-components/design/toolbar/toolbar.html

@@ -0,0 +1,96 @@
+<div class="tools" nz-flex nzGap="4px">
+    <button nz-button nzSize="small" nzType="text" nzShape="circle" nz-tooltip="快捷键说明"
+        (click)="shortcutKeysModal.set(true)">
+        <nz-icon nzType="exclamation-circle" nzTheme="outline" />
+    </button>
+    <button nz-button nzSize="small" nzType="text" nzShape="circle" nz-tooltip="编辑历史" nz-popover
+        [nzPopoverTitle]="historyTitle" nzPopoverTrigger="click" [nzPopoverContent]="historyTemp"
+        nzPopoverPlacement="bottom" nzPopoverOverlayClassName="history-popover">
+        <nz-icon nzType="history" nzTheme="outline" />
+    </button>
+    <button nz-button nzSize="small" nzType="text" nzShape="circle" [nz-tooltip]="onlyPreview()?'恢复':'放大'"
+        (click)="onlyPreview.set(!onlyPreview())">
+        <nz-icon [nzType]="onlyPreview()?'fullscreen-exit':'fullscreen'" />
+    </button>
+    <button nz-button nzSize="small" nzType="text" nzShape="circle" nz-tooltip="重新载入"
+        (click)="design.preview.forceRender()">
+        <nz-icon nzType="reload" />
+    </button>
+</div>
+
+<ng-template #historyTitle>
+    <div nz-flex>
+        <div style="flex:1">编辑历史</div>
+        <button nz-button nzSize="small" nzType="link" nzShape="circle" nz-tooltip="撤销" (click)="undo()"
+            [disabled]="historyIndex==history.length-1">
+            <nz-icon nzType="undo" nzTheme="outline" />
+        </button>
+        <button nz-button nzSize="small" nzType="link" nzShape="circle" nz-tooltip="重做" (click)="redo()"
+            [disabled]="historyIndex==0">
+            <nz-icon nzType="redo" nzTheme="outline" />
+        </button>
+    </div>
+</ng-template>
+
+<ng-template #historyTemp>
+    <div nz-flex nzVertical>
+        @for (item of history; track item.time;let i=$index) {
+        <div nz-flex [class.active]="i == historyIndex" class="history-item" (click)="switchHistory(i)">
+            <div style="width: 20px;">
+                @if (i == historyIndex) {
+                <nz-icon nzType="aim" nzTheme="outline" />
+                }
+            </div>
+            <div>#{{history.length-i}} {{item.time | axisHowLong}}</div>
+        </div>
+        }
+    </div>
+</ng-template>
+
+<nz-modal [(nzVisible)]="shortcutKeysModal" nzTitle="快捷键说明" nzDraggable [nzOkText]="null" nzCancelText="关闭"
+    (nzOnCancel)="shortcutKeysModal.set(false)">
+    <ng-container *nzModalContent>
+        <nz-table nzTemplateMode nzSize="small">
+            <thead>
+                <tr>
+                    <th>功能</th>
+                    <th>快捷键</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>查看快捷键说明</td>
+                    <td>Ctrl Meta H</td>
+                </tr>
+                <tr>
+                    <td>复制</td>
+                    <td>Ctrl C</td>
+                </tr>
+                <tr>
+                    <td>剪切</td>
+                    <td>Ctrl X</td>
+                </tr>
+                <tr>
+                    <td>粘贴</td>
+                    <td>Ctrl V</td>
+                </tr>
+                <tr>
+                    <td>撤销</td>
+                    <td>Ctrl Z</td>
+                </tr>
+                <tr>
+                    <td>重做</td>
+                    <td>Ctrl Shift Z</td>
+                </tr>
+                <tr>
+                    <td>预览放大/恢复</td>
+                    <td>Ctrl Meta C</td>
+                </tr>
+                <tr>
+                    <td>重新载入</td>
+                    <td>Ctrl Meta R</td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </ng-container>
+</nz-modal>

package/axis-components/design/toolbar/toolbar.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, model, signal } from '@angular/core';
+import { Design } from '../design';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
+import { copy, HowLongPipe } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-toolbar',
+  imports: [NzModalModule, NzTableModule, NzFlexModule, NzIconModule, NzToolTipModule, NzButtonModule, NzPopoverModule, HowLongPipe],
+  templateUrl: './toolbar.html',
+  styleUrl: './toolbar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Toolbar {
+
+  readonly design = inject(Design);
+  readonly cdr = inject(ChangeDetectorRef);
+  readonly onlyPreview = signal(false);
+  readonly shortcutKeysModal = model(false);
+
+  readonly history: { options: any, time: Date }[] = [];
+  historyIndex = 0;
+
+  putHistory(options: any) {
+    if (this.historyIndex > 0) {
+      this.history.splice(0, this.historyIndex);
+      this.historyIndex = 0;
+    }
+    this.history.unshift({ options: copy(options, true), time: new Date() });
+    if (this.history.length > 50) {
+      this.history.pop();
+    }
+    this.cdr.markForCheck();
+  }
+
+  undo() {
+    if (this.historyIndex < this.history.length - 1) {
+      this.historyIndex++;
+      this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+      this.cdr.markForCheck();
+    }
+  }
+
+  redo() {
+    if (this.historyIndex > 0) {
+      this.historyIndex--;
+      this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+      this.cdr.markForCheck();
+    }
+  }
+
+  switchHistory(index: number) {
+    if (index != this.historyIndex && index > -1 && index < this.history.length) {
+      this.historyIndex = index;
+      this.design.onChangeOptionsConfig(copy(this.history[this.historyIndex].options, true), false);
+      this.cdr.markForCheck();
+    }
+  }
+
+}

package/axis-components/design/tree/drag-drop.ts

@@ -0,0 +1,125 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { FlatNode, OptionsNode } from 'ngx-axis-appforge/core';
+
+export class DragDrop {
+
+    constructor(private optionsNodes: Map<string, OptionsNode>, private optionIdflatNodes: Map<string, FlatNode>, private treeControl: FlatTreeControl<FlatNode, string>, private onChange: () => void) { }
+
+    dragNode?: OptionsNode;
+    dropNode?: OptionsNode;
+    targetIndex?: number | string;
+    element?: HTMLElement;
+    pos?: number;
+
+    canDrag(nodeId: string): boolean {
+        const node = this.optionsNodes.get(nodeId);
+        return !!node && !node?.isRoot && node?.canDrag;
+    }
+
+    onDragStart(e: DragEvent, nodeId: string) {
+        this.dragNode = this.optionsNodes.get(nodeId);
+        if (this.dragNode?.children?.length) {
+            this.treeControl.collapse(this.optionIdflatNodes.get(nodeId)!);
+        }
+        setTimeout(() => {
+            (e.target as HTMLElement).style.display = 'none';
+        });
+    }
+
+    onDragOver(e: DragEvent, nodeId: string) {
+        const node = this.optionsNodes.get(nodeId)!;
+        const parent = node.parentId ? this.optionsNodes.get(node.parentId) : undefined;
+        let canDropIn = this.canDrop(node);
+        let canDropSide = !!parent && this.canDrop(parent);
+        if (!canDropIn && !canDropSide) {
+            e.preventDefault();
+            return;
+        }
+        const pos = this.getPos(e, canDropIn, canDropSide);
+        const element = (e.currentTarget as HTMLElement);
+        this.updateElementStyle(element, pos);
+        if (pos == 0) {
+            this.targetIndex = node?.defaultDropIndex;
+            this.dropNode = node;
+            this.treeControl.expand(this.optionIdflatNodes.get(node.id!)!)
+        } else if (pos == -1) {
+            this.targetIndex = node.indexOfParentObj;
+            this.dropNode = parent;
+        } else {
+            this.targetIndex = (node.indexOfParentObj as number) + 1;
+            this.dropNode = parent;
+        }
+    }
+
+    private updateElementStyle(element?: HTMLElement, pos?: number) {
+        if (element != this.element || pos != this.pos) {
+            this.element?.classList.remove("drop_in", "drop_up", "drop_down");
+            if (element) {
+                switch (pos) {
+                    case -1:
+                        element.classList.add("drop_up");
+                        break;
+                    case 0:
+                        element.classList.add("drop_in");
+                        break;
+                    default:
+                        element.classList.add("drop_down");
+                        break;
+                }
+            }
+            this.element = element;
+            this.pos = pos;
+        }
+    }
+
+    onDragEnd(e: DragEvent, nodeId: string) {
+        (e.target as HTMLElement).style.display = 'flex';
+        if (this.dropNode) {
+            if (this.dropNode.dropObj == this.dragNode!.parentObj && this.dragNode!.indexOfParentObj == this.targetIndex) {
+                this.updateElementStyle();
+                return undefined;
+            }
+            if (this.dropNode.dropObj instanceof Array && this.dropNode.dropObj == this.dragNode!.parentObj && this.dragNode!.indexOfParentObj! < this.targetIndex!) {
+                (this.targetIndex as number)!--;
+            }
+            const dragObj = this.dragNode!.options;
+            if (!this.dragNode!.isRoot) {
+                if (this.dragNode?.parentObj instanceof Array) {
+                    this.dragNode!.parentObj.splice(this.dragNode!.indexOfParentObj as number, 1);
+                } else {
+                    this.dragNode!.parentObj[this.dragNode!.indexOfParentObj as number] = null;
+                }
+            }
+            if (this.dropNode.dropObj instanceof Array) {
+                this.dropNode.dropObj.splice(this.targetIndex as number, 0, dragObj);
+            } else {
+                this.dropNode.dropObj[this.targetIndex!] = dragObj;
+            }
+            this.onChange();
+        }
+        this.dragNode = undefined;
+        this.updateElementStyle();
+    }
+
+    private canDrop(node: OptionsNode | undefined): boolean {
+        if (node && node.canDrop && node.dropType == this.dragNode!.dragType) {
+            return !node.dropObj[node.defaultDropIndex!];
+        }
+        return false;
+    }
+
+    private getPos(e: DragEvent, canDropIn: boolean, canDropSide: boolean): number {
+        const element = e.target as HTMLElement;
+        const rect = element.getBoundingClientRect();
+        const clientY = e.clientY - rect.top;
+        const height = rect.height;
+        if (canDropIn && canDropSide) {
+            return 1 - Math.floor(clientY / height * 3);
+        } else if (canDropSide) {
+            return clientY < height / 2 ? -1 : 1;
+        } else {
+            return 0;
+        }
+    }
+
+}

package/axis-components/design/tree/tree.css

@@ -0,0 +1,30 @@
+::ng-deep .highlight {
+    color: #f50;
+}
+
+nz-tree-view {
+    overflow: auto;
+    flex: 1;
+}
+
+.drop_in {
+    outline: 1px solid blue;
+}
+
+.drop_up::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    width: 100%;
+    height: 2px;
+    background-color: blue;
+}
+
+.drop_down::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    width: 100%;
+    height: 2px;
+    background-color: blue;
+}

package/axis-components/design/tree/tree.html

@@ -0,0 +1,49 @@
+<div nz-flex [nzVertical]="true" style="height: 100%;">
+    <div nz-flex style="padding-right: 8px;" nzGap="4px" nzAlign="center">
+        <input style="flex:1;" type="text" nz-input placeholder="搜索" nzBorderless ngModel
+            (ngModelChange)="searchValue$.next($event)" />
+        <button nz-button nzSize="small" nzType="text" nzShape="circle" (click)="toggleExpanded()">
+            <nz-icon [nzType]="hasExpanded?'shrink':'arrows-alt'" nzTheme="outline" />
+        </button>
+    </div>
+    @if (node() === null) {
+    <nz-empty [nzNotFoundContent]="contentTpl" [nzNotFoundFooter]="footerTpl">
+        <ng-template #contentTpl>
+            没有组件
+        </ng-template>
+        <ng-template #footerTpl>
+            <button nz-button nzType="dashed" (click)="addRootComponent()">
+                <nz-icon nzType="plus"></nz-icon>
+                添加组件
+            </button>
+        </ng-template>
+    </nz-empty>
+    }@else {
+    <nz-tree-view nzDirectoryTree [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
+        <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding [nzTreeNodePaddingIndent]="8"
+            (contextmenu)="contextMenu($event, node.id)" [draggable]="dragdrop().canDrag(node.id)"
+            (dragstart)="dragdrop().onDragStart($event, node.id)" (dragover)="dragdrop().onDragOver($event, node.id)"
+            (dragend)="dragdrop().onDragEnd($event,node.id)">
+            <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
+            <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node.id)"
+                (nzClick)="onNodeClick($event,node)" [nz-tooltip]="node.id" [nzTooltipMouseEnterDelay]="0.6">
+                <i nz-icon [nzType]="node.icon" style="margin: 4px;"></i>
+                <span [innerHTML]="node.title | nzHighlight: searchValue() : 'i' : 'highlight'"></span>
+            </nz-tree-node-option>
+        </nz-tree-node>
+        <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding [nzTreeNodePaddingIndent]="8"
+            (contextmenu)="contextMenu($event, node.id)" [draggable]="dragdrop().canDrag(node.id)"
+            (dragstart)="dragdrop().onDragStart($event, node.id)" (dragover)="dragdrop().onDragOver($event, node.id)"
+            (dragend)="dragdrop().onDragEnd($event,node.id)">
+            <nz-tree-node-toggle>
+                <nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon />
+            </nz-tree-node-toggle>
+            <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node.id)"
+                (nzClick)="onNodeClick($event,node)" [nz-tooltip]="node.id" [nzTooltipMouseEnterDelay]="0.6">
+                <i nz-icon [nzType]="node.icon" style="margin: 4px;"></i>
+                <span [innerHTML]="node.title | nzHighlight: searchValue() : 'i' : 'highlight'"></span>
+            </nz-tree-node-option>
+        </nz-tree-node>
+    </nz-tree-view>
+    }
+</div>

package/axis-components/design/tree/tree.ts

@@ -0,0 +1,292 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, input, OnDestroy, OnInit, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NzHighlightPipe } from 'ng-zorro-antd/core/highlight';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view';
+import { auditTime, BehaviorSubject, combineLatest, filter, map, Subscription, take, tap } from 'rxjs';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { SelectionModel } from '@angular/cdk/collections';
+import { DragDrop } from './drag-drop';
+import { FlatNode, FilteredTreeResult, OptionsNode } from 'ngx-axis-appforge/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzTooltipModule } from 'ng-zorro-antd/tooltip';
+import { Design } from '../design';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+
+@Component({
+  selector: 'axis-design-tree',
+  imports: [FormsModule, NzInputModule, NzIconModule, NzTreeViewModule, NzFlexModule, NzHighlightPipe, NzButtonModule, NzTooltipModule, NzEmptyModule],
+  templateUrl: './tree.html',
+  styleUrl: './tree.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Tree implements OnDestroy {
+
+  readonly node = input.required<OptionsNode | undefined | null>()
+  readonly optionsNodes = input.required<Map<string, OptionsNode>>();
+  onChange = output<any>();
+  readonly onSelect = output<string[]>()
+  readonly onContextMenu = output<{ nodeId: string, event: MouseEvent }>()
+  readonly dragdrop = computed(() => new DragDrop(this.optionsNodes(), this.optionIdflatNodes, this.treeControl, () => this.onChange.emit(undefined)));
+  readonly optionIdflatNodes = new Map<string, FlatNode>();
+  readonly flatNodeMap = new Map<string, OptionsNode>();
+  readonly nestedNodeMap = new Map<string, FlatNode>();
+  searchValue = signal<string>('');
+  readonly originData$ = new BehaviorSubject<OptionsNode[]>([]);
+  readonly searchValue$ = new BehaviorSubject<string>('');
+  readonly selectListSelection = new SelectionModel<string>(true);
+  readonly design = inject(Design);
+  private readonly subs: Subscription[] = [];
+
+  readonly transformer = (node: OptionsNode, level: number): FlatNode => {
+    const existingNode = this.nestedNodeMap.get(node.id);
+    const currentNode = {
+      expandable: !!node.children && node.children.length > 0,
+      id: node.id!,
+      title: node.name ?? "",
+      icon: node.icon,
+      level
+    };
+    let flatNode: FlatNode;
+    if (existingNode?.id == currentNode.id && existingNode.expandable == currentNode.expandable && existingNode.level == currentNode.level) {
+      flatNode = Object.assign(existingNode, currentNode);
+    } else {
+      flatNode = currentNode;
+    }
+    this.optionIdflatNodes.set(flatNode.id, flatNode);
+    this.flatNodeMap.set(flatNode.id, node);
+    this.nestedNodeMap.set(node.id, flatNode);
+    return flatNode;
+  };
+
+  readonly treeControl = new FlatTreeControl<FlatNode, string>(
+    node => node.level,
+    node => node.expandable,
+    {
+      trackBy: flatNode => flatNode.id
+    }
+  );
+
+  readonly treeFlattener = new NzTreeFlattener<OptionsNode, FlatNode, string>(
+    this.transformer,
+    node => node.level,
+    node => node.expandable,
+    node => node.children
+  );
+
+  readonly dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  readonly filteredData$ = combineLatest([
+    this.originData$,
+    this.searchValue$.pipe(
+      auditTime(300),
+      tap(value => this.searchValue.set(value))
+    )
+  ]).pipe(map(([data, value]) => (value ? filterTreeData(data, value) : new FilteredTreeResult(data, this.treeControl.expansionModel.selected.filter(id => this.optionsNodes().has(id))))));
+
+  constructor(private cdRef: ChangeDetectorRef) {
+    effect(() => {
+      if (this.node()) {
+        this.originData$.next([this.node()!]);
+      }
+      const oldlength = this.selectListSelection.selected.length;
+      this.selectListSelection.deselect(...this.selectListSelection.selected.filter(nodeid => !this.optionsNodes().has(nodeid)))
+      this.treeControl.expansionModel.deselect(...this.treeControl.expansionModel.selected.filter(id => !this.optionsNodes().has(id)));
+      if (oldlength != this.selectListSelection.selected.length) {
+        this.sendSelectEvent();
+      }
+    });
+    this.subs.push(this.filteredData$.subscribe(result => {
+      this.dataSource.setData(result.treeData);
+      this.treeControl.expansionModel.setSelection(...result.needsToExpanded);
+    }));
+    this.subs.push(this.filteredData$.pipe(filter(r => r.treeData.length > 0), take(1)).subscribe(result => {
+      this.selectOne(result.treeData[0].id, { sendEvent: true });
+    }));
+  }
+
+  hasChild = (_: number, node: FlatNode): boolean => node.expandable;
+
+  get hasExpanded(): boolean {
+    return this.treeControl.expansionModel.selected.length > 0;
+  }
+
+  onNodeClick(e: MouseEvent, node: FlatNode) {
+    if (e.metaKey) {
+      this.toggleSelect(node.id, { sendEvent: true });
+    } else {
+      this.selectOne(node.id, { sendEvent: true });
+    }
+  }
+
+  select(nodeId: string, opt?: { sendEvent: boolean }) {
+    this.selectListSelection.select(nodeId);
+    if (opt?.sendEvent) {
+      this.sendSelectEvent();
+    }
+  }
+
+  selectOne(nodeId: string, opt?: { sendEvent: boolean }) {
+    this.unSelectAll();
+    this.selectListSelection.select(nodeId);
+    if (opt?.sendEvent) {
+      this.sendSelectEvent();
+    }
+  }
+
+  toggleSelect(nodeId: string, opt?: { sendEvent: boolean }) {
+    this.selectListSelection.toggle(nodeId);
+    if (opt?.sendEvent) {
+      this.sendSelectEvent();
+    }
+  }
+
+  unSelect(nodeId: string, opt?: { sendEvent: boolean }) {
+    this.selectListSelection.deselect(nodeId);
+    if (opt?.sendEvent) {
+      this.sendSelectEvent();
+    }
+  }
+
+  unSelectAll(opt?: { sendEvent: boolean }) {
+    this.selectListSelection.clear();
+    if (opt?.sendEvent) {
+      this.sendSelectEvent();
+    }
+  }
+
+  private sendSelectEvent() {
+    this.onSelect.emit(this.selectListSelection.selected);
+  }
+
+  selectByNodeIds(nodeIds: string[]) {
+    this.unSelectAll();
+    for (const nodeId of nodeIds) {
+      this.select(nodeId);
+      const node = this.optionIdflatNodes.get(nodeId);
+      if (node) {
+        this.treeControl.expand(node);
+      }
+    }
+    this.cdRef.markForCheck();
+  }
+
+  expandByNodeIds(nodeIds: string[]) {
+    for (const nodeId of nodeIds) {
+      const node = this.optionIdflatNodes.get(nodeId);
+      if (node) {
+        this.treeControl.expand(node);
+      }
+    }
+  }
+
+  toggleExpanded() {
+    if (this.hasExpanded) {
+      this.treeControl.collapseAll();
+    } else {
+      this.treeControl.expandAll();
+    }
+  }
+
+  reset() {
+    this.optionIdflatNodes.clear();
+    this.flatNodeMap.clear();
+  }
+
+  contextMenu(e: MouseEvent, nodeId: string) {
+    this.onContextMenu.emit({ event: e, nodeId });
+  }
+
+  removeSelected() {
+    let changed = false;
+    let next = undefined;
+    for (const nodeId of this.selectListSelection.selected) {
+      const node = this.optionsNodes().get(nodeId);
+      if (node) {
+        changed = true;
+        if (node.isRoot) {
+          next = null;
+        } else {
+          if (Array.isArray(node.parentObj)) {
+            node.parentObj.splice(node.parentObj.indexOf(node.options), 1);
+          } else {
+            node.parentObj[node.indexOfParentObj!] = null;
+          }
+        }
+      }
+    }
+    if (changed) {
+      this.onChange.emit(next);
+    }
+  }
+
+  addNodeForSelected(nodes: OptionsNode[], deleteSuccess = false) {
+    if (nodes.length && this.selectListSelection.selected) {
+      for (const nodeId of this.selectListSelection.selected) {
+        const parentNode = this.optionsNodes().get(nodeId);
+        if (parentNode && parentNode.canDrop && parentNode.dropType == "component") {
+          if (Array.isArray(parentNode.dropObj)) {
+            parentNode.dropObj.splice(parentNode.dropObj.length, 0, ...nodes.map(n => n.options));
+            nodes.forEach(n => this.deleteNode(n));
+          } else if (!parentNode.dropObj[parentNode.defaultDropIndex!]) {
+            const n = nodes[nodes.length - 1];
+            parentNode.dropObj[parentNode.defaultDropIndex!] = n.options;
+            if (deleteSuccess) {
+              this.deleteNode(n);
+            }
+          }
+        }
+      }
+      this.onChange.emit(undefined);
+    }
+  }
+
+  private deleteNode(node: OptionsNode) {
+    if (node.parentObj) {
+      if (Array.isArray(node.parentObj)) {
+        node.parentObj.splice(node.indexOfParentObj as number, 1);
+      } else {
+        delete node.parentObj[node.indexOfParentObj!];
+      }
+    }
+  }
+
+  addRootComponent() {
+    this.design.chooseComponent().subscribe(res => {
+      const { options, config } = res;
+      if (options && config) {
+        this.onChange.emit(options);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    for (let sub of this.subs) {
+      sub.unsubscribe();
+    }
+  }
+
+}
+
+function filterTreeData(data: OptionsNode[], value: string): FilteredTreeResult {
+  const needsToExpanded = new Set<string>();
+  const _filter = (node: OptionsNode, result: OptionsNode[]): OptionsNode[] => {
+    if (node.name?.search(value) !== -1 || node.id?.search(value) !== -1) {
+      result.push(node);
+      return result;
+    }
+    if (Array.isArray(node.children)) {
+      const nodes = node.children.reduce((a, b) => _filter(b, a), [] as OptionsNode[]);
+      if (nodes.length) {
+        const parentNode = node.copyWith({ children: nodes })
+        needsToExpanded.add(parentNode.id);
+        result.push(parentNode);
+      }
+    }
+    return result;
+  };
+  const treeData = data.reduce((a, b) => _filter(b, a), [] as OptionsNode[]);
+  return new FilteredTreeResult(treeData, [...needsToExpanded]);
+}

package/axis-components/dynamic-container/design/config.ts

@@ -0,0 +1,30 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+
+    componentName: "动态容器",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: "动态容器",
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "container"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};