ngx-axis-appforge 0.0.2 → 0.0.3

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

@@ -1,96 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,30 +0,0 @@
-::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

@@ -1,49 +0,0 @@
-<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

@@ -1,292 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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 }
-        }
-    },
-};