ngx-axis-appforge 0.0.2 → 0.0.3

package/axis-components/design/design.ts

@@ -1,509 +0,0 @@
-import { ChangeDetectionStrategy, Component, ComponentRef, HostListener, inject, Injector, model, OnDestroy, signal, ViewChild, ViewContainerRef } from '@angular/core';
-import { NzSplitterModule } from 'ng-zorro-antd/splitter';
-import { NzTabsModule } from 'ng-zorro-antd/tabs';
-import { Tree } from './tree/tree';
-import { Preview } from './preview/preview';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
-import { AXIS_COMPONENTS_LOADER_TOKEN, ValueAccess, FunFieldValueBase, ScopeInfo, NextInfo, OptionsNode, AXIS_DESIGN_OPTIONS_NODE_FOR_MENU, AXIS_DESIGN_ALL_PERMISSIONS_TOKEN, DynamicDirective, AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, Example, AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN, EventHandlerDesc, AXIS_INJECT_FUNC_TOKEN, copy, AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN, DesignConfig } from 'ngx-axis-appforge/core';
-import { Cmplib } from './cmplib/cmplib';
-import { FormsModule } from '@angular/forms';
-import { NzEmptyModule } from 'ng-zorro-antd/empty';
-import { ShortcutKey } from './shortcut-key';
-import { DesignOptions } from './design.options';
-import { BehaviorSubject, debounceTime, filter, from, map, merge, NEVER, Observable, of, Subject, switchMap, take } from 'rxjs';
-import { NzDrawerModule } from 'ng-zorro-antd/drawer';
-import { Toolbar } from './toolbar/toolbar';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { ClipboardService } from 'ngx-clipboard';
-
-@Component({
-  selector: 'axis-design',
-  imports: [NzSplitterModule, NzTabsModule, Preview, Tree, NzFlexModule, Cmplib, FormsModule, NzEmptyModule, DynamicDirective, NzDrawerModule, Toolbar],
-  templateUrl: './design.html',
-  styleUrl: './design.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    tabindex: "-1",
-    autofocus: "true",
-  }
-})
-export class Design extends ValueAccess<DesignOptions> implements OnDestroy {
-
-  constructor() {
-    super();
-    this.addSubscribe(this.changeSubject
-      .pipe(debounceTime(300))
-      .subscribe((value) => this.onChangeOptionsConfig(value)))
-  }
-
-  protected override options = new DesignOptions();
-
-  clipboard = inject(ClipboardService);
-  loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
-  injectDataObs = toObservable(this.options.injectData);
-  funcs = inject(AXIS_INJECT_FUNC_TOKEN);
-
-  treeNode = signal<OptionsNode | null | undefined>(undefined);
-  loadAndOptions = signal<[Promise<any>, any] | undefined>(undefined);
-
-  @ViewChild("menu", { static: true, read: ViewContainerRef })
-  menu!: ViewContainerRef;
-  readonly chooseComponentVisible = model(false);
-  readonly chooseComponentSubject = new Subject<Example | undefined>();
-  readonly chooseComponentTags = signal<string[]>([]);
-
-  cacheSized: [number, number] = [300, 300];
-  @ViewChild("setting", { static: true, read: ViewContainerRef })
-  setting!: ViewContainerRef;
-  settingRef?: ComponentRef<FunFieldValueBase>;
-  settingOptionsNodeId?: string;
-  settingOptionsStr = model("");
-
-  @ViewChild("preview", { static: true })
-  preview!: Preview;
-
-  @ViewChild("tree", { static: true })
-  tree!: Tree;
-
-  @ViewChild("codeEditor")
-  codeEditor?: DynamicDirective;
-
-  @ViewChild("tools", { static: true })
-  tools!: Toolbar;
-
-  readonly shortcutKey = new ShortcutKey(this);
-  @HostListener("keydown", ['$event'])
-  onKeyPress(e: KeyboardEvent) {
-    this.shortcutKey.onKeyPress(e);
-  }
-
-  readonly optionsNodes = new Map<string, OptionsNode>();
-  readonly optionsNodeScopes = new Map<string, OptionsNode[]>();
-  readonly scopeInfos = new Map<string, ScopeInfo>();
-
-  readonly componentsInfo = new Map<string, { component: string, componentName: string, eventHandlerDescs: { [name: string]: EventHandlerDesc } }>
-  readonly componentsCounter = new Map<string, number>();
-  readonly scopInfoSubjects = new Map<string, BehaviorSubject<ScopeInfo[]>>();
-
-  readonly changeSubject = new Subject<any>();
-
-  override setInitValue(value: any): void {
-    super.setInitValue(value);
-    this.tools.putHistory(value);
-    this.render(value);
-  }
-
-  override writeValue(value: any): void {
-    super.writeValue(value);
-    this.tools.putHistory(value);
-    this.render(value);
-  }
-
-  async inspect(nextInfo: NextInfo): Promise<OptionsNode | undefined> {
-    if (!nextInfo.currentObject?.component) {
-      return;
-    }
-    const config = await this.loader.loadComponent(`${nextInfo.currentObject.component}/design`);
-    if (!this.componentsInfo.has(nextInfo.currentObject.component)) {
-      this.componentsInfo.set(nextInfo.currentObject.component, { component: nextInfo.currentObject.component, componentName: config.componentName, eventHandlerDescs: config.eventHandlerDescs });
-    }
-    if (!this.componentsCounter.has(nextInfo.currentObject.component)) {
-      this.componentsCounter.set(nextInfo.currentObject.component, 0);
-    }
-    this.componentsCounter.set(nextInfo.currentObject.component, this.componentsCounter.get(nextInfo.currentObject.component)! + 1);
-    const res = config.buildOptionsNodes?.(nextInfo);
-    if (res) {
-      let nodes = [res.treeNode];
-      while (nodes.length) {
-        let next: OptionsNode[] = [];
-        for (const node of nodes) {
-          this.optionsNodes.set(node.id!, node);
-          if (node.children) {
-            next = next.concat(node.children);
-          }
-          nodes = next;
-        }
-      }
-      if (res.treeNode.scopeId) {
-        if (!this.optionsNodeScopes.has(res.treeNode.scopeId)) {
-          this.optionsNodeScopes.set(res.treeNode.scopeId, []);
-        }
-        this.optionsNodeScopes.get(res.treeNode.scopeId)!.push(res.treeNode);
-      }
-      if (res.newScopes) {
-        for (const scope of res.newScopes) {
-          this.scopeInfos.set(scope.scopeId, scope);
-        }
-      }
-      if (res.next?.length) {
-        for (const r of res.next) {
-          if (Array.isArray(r.parentObject)) {
-            for (let i = 0; i < r.parentObject.length; i++) {
-              r.indexOfParent = i;
-              r.currentObject = r.parentObject[i];
-              const parent = this.optionsNodes.get(r.parentId);
-              const child = await this.inspect(r);
-              if (child) {
-                parent?.children?.push(child);
-              }
-            }
-          } else if (r.indexOfParent != undefined) {
-            r.currentObject = r.parentObject[r.indexOfParent];
-            const child = await this.inspect(r);
-            if (child) {
-              this.optionsNodes.get(r.parentId)?.children?.push(child);
-            }
-          }
-        }
-      }
-    }
-    return res?.treeNode;
-  }
-
-  onChangeOptionsConfig(value?: any, putHistory = true) {
-    this.reset();
-    if (value === undefined) {
-      value = this.value();
-    }
-    this.value.set(copy(value, true));
-    this.render(this.value());
-    this.loadAndOptions()?.[0].then(() => {
-      if (!putHistory && this.settingOptionsNodeId) {
-        const node = this.optionsNodes.get(this.settingOptionsNodeId);
-        if (node) {
-          this.settingRef?.instance.writeValue(node.options);
-        }
-        this.syncToCode();
-      }
-    });
-    this.onChange?.(this.value());
-    if (putHistory) {
-      this.tools.putHistory(this.value());
-    }
-  }
-
-  render(value: any) {
-    this.loadAndOptions.set([this.inspect({ currentObject: value }).then(v => {
-      this.treeNode.set(v ?? null);
-      return v;
-    }), value])
-  }
-
-  onSettingChange(settingValue: any) {
-    if (this.settingOptionsNodeId) {
-      const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId!);
-      if (optionsNode) {
-        if (optionsNode.isRoot) {
-          Object.assign(this.value(), settingValue);
-        } else {
-          optionsNode.updateOptions(settingValue);
-        }
-        this.settingOptionsNodeId = optionsNode.id;
-        this.preview.selectByNodeIds([this.settingOptionsNodeId!]);
-        this.tree.selectByNodeIds([this.settingOptionsNodeId!]);
-        this.changeSubject.next(undefined);
-      }
-    }
-  }
-
-  onTreeSelect(nodeIds: string[]) {
-    this.preview.selectByNodeIds(nodeIds);
-    if (nodeIds.length == 1) {
-      this.updateScopeWithNodeId(nodeIds[0]);
-      this.loadSetting(nodeIds[0]);
-    } else {
-      this.settingOptionsNodeId = undefined;
-      this.resetSetting();
-    }
-  }
-
-  onPreviewSelect(nodeIds: string[]) {
-    this.menu.clear();
-    this.tree.selectByNodeIds(nodeIds);
-    if (nodeIds.length == 1) {
-      this.updateScopeWithNodeId(nodeIds[0]);
-      this.loadSetting(nodeIds[0]);
-    } else {
-      this.settingOptionsNodeId = undefined;
-      this.resetSetting();
-    }
-    let expandIds: string[] = [];
-    for (const nodeid of nodeIds) {
-      expandIds = expandIds.concat(this.getAllParentNodes(nodeid).map(n => n.id!));
-    }
-    this.tree.expandByNodeIds(expandIds);
-  }
-
-  private updateScopeWithNodeId(nodeId: string) {
-    let scopeId = this.optionsNodes.get(nodeId)?.scopeId;
-    while (scopeId && this.scopeInfos.has(scopeId)) {
-      this.preview.updateScopeWithSelectedElement(scopeId);
-      scopeId = this.scopeInfos.get(scopeId)?.parentScopeId;
-    }
-  }
-
-  loadSetting(nodeId: string) {
-    if (nodeId && this.optionsNodes.has(nodeId)) {
-      if (this.settingOptionsNodeId == nodeId) {
-        return;
-      } else if (this.settingOptionsNodeId) {
-        const oldNode = this.optionsNodes.get(this.settingOptionsNodeId)!;
-        const newNode = this.optionsNodes.get(nodeId)!;
-        if (oldNode.parentId == newNode.parentId && oldNode.settingType == newNode.settingType) {
-          this.settingOptionsNodeId = nodeId;
-          this.settingOptionsStr.set(JSON.stringify(newNode.options, null, "  "));
-          this.settingRef?.instance.writeValue(newNode.options);
-          return;
-        }
-      }
-      this.resetSetting();
-      this.settingOptionsNodeId = nodeId;
-      const optionsNode = this.optionsNodes.get(nodeId)!;
-      this.settingOptionsStr.set(JSON.stringify(optionsNode.options, null, "  "));
-      if (optionsNode.settingType) {
-        const injector = Injector.create({
-          providers: [
-            { provide: AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, useValue: this.buildScopeInfosGetter(optionsNode) },
-            { provide: AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN, useValue: this.buildComponentInfoForSetting(optionsNode) },
-            { provide: AXIS_DESIGN_ALL_PERMISSIONS_TOKEN, useValue: this.options.allPermissions() },
-            { provide: AXIS_INJECT_FUNC_TOKEN, useValue: this.funcs }
-          ]
-        })
-        this.settingRef = this.setting.createComponent(optionsNode.settingType, { injector: injector });
-        this.settingRef.instance.onChange = this.onSettingChange.bind(this);
-        this.settingRef.instance.writeValue(optionsNode.options);
-      }
-    } else {
-      this.resetSetting();
-    }
-  }
-
-  private buildScopeInfosGetter(optionsNode: OptionsNode): (scopeId?: string) => BehaviorSubject<ScopeInfo[]> {
-    const _scopeId = optionsNode.scopeId;
-    return (scopeId?: string): BehaviorSubject<ScopeInfo[]> => {
-      scopeId ??= _scopeId;
-      if (scopeId) {
-        if (!this.scopInfoSubjects.has(scopeId)) {
-          this.scopInfoSubjects.set(scopeId, this.buildScopeInfoSubject(scopeId));
-        }
-        return this.scopInfoSubjects.get(scopeId)!;
-      }
-      return new BehaviorSubject<ScopeInfo[]>([]);
-    }
-  }
-
-  private buildScopeInfoSubject(scopeId: string | undefined): BehaviorSubject<ScopeInfo[]> {
-    const scopeObs: Observable<{ scopeInfo: ScopeInfo, index: number }>[] = [];
-    const scopeInfosOrder: string[] = [];
-    while (scopeId && this.scopeInfos.has(scopeId)) {
-      const scopeInfo = this.scopeInfos.get(scopeId)!;
-      scopeInfosOrder.push(scopeId);
-      const scopeSubject = this.preview.getAndUpdateScopeSubject(scopeId);
-      scopeObs.push(scopeSubject.pipe(
-        filter(s => !!s),
-        switchMap(s => {
-          return merge(new Observable(sub => sub.next(s.getSnapshoptAllWithScopeId(s.axisScope()))), s.getAllWithScopeId(s.axisScope()) ?? NEVER);
-        }),
-        filter(realDs => !!realDs && this.scopeInfos.has(scopeInfo.scopeId)),
-        map(realDs => {
-          const _scopeInfo = this.scopeInfos.get(scopeInfo.scopeId)!;
-          return {
-            scopeInfo: { ..._scopeInfo, ds: { ..._scopeInfo.ds, ...realDs } },
-            index: scopeInfosOrder.indexOf(scopeInfo.scopeId),
-          };
-        })
-      ));
-      scopeId = scopeInfo.parentScopeId;
-    }
-    const subject = new BehaviorSubject<ScopeInfo[]>([]);
-    const res: ScopeInfo[] = [];
-    this.addSubscribe(merge(...scopeObs).pipe(map(row => {
-      res[row.index] = row.scopeInfo;
-      return [...res];
-    })).subscribe(subject));
-    return subject;
-  }
-
-  private buildComponentInfoForSetting(optionsNode: OptionsNode): { component: string, componentName: string, nodes: OptionsNode[], eventHandlerDescs: { [event: string]: EventHandlerDesc } }[] {
-    const componentInfo: Map<string, { component: string, componentName: string, nodes: OptionsNode[], eventHandlerDescs: { [event: string]: EventHandlerDesc } }> = new Map();
-    let scopeId = optionsNode.scopeId;
-    while (scopeId) {
-      let nodes = this.optionsNodeScopes.get(scopeId)!
-      if (nodes) {
-        for (const node of nodes) {
-          const component = node.options.component;
-          if (!componentInfo.has(component)) {
-            const info = this.componentsInfo.get(component)!;
-            componentInfo.set(component, { component: info.component, componentName: info.componentName, nodes: [], eventHandlerDescs: info.eventHandlerDescs ?? {} })
-          }
-          componentInfo.get(component)!.nodes.push(node);
-        }
-      }
-      scopeId = this.scopeInfos.get(scopeId)?.parentScopeId;
-    }
-    return Array.from(componentInfo.values());
-  }
-
-  onContextMenu(e: MouseEvent, nodeId: string) {
-    const node = this.optionsNodes.get(nodeId);
-    if (node?.contextMenu) {
-      const parent = node.isRoot ? undefined : this.optionsNodes.get(node.parentId!)
-      const injector = Injector.create({
-        providers: [
-          { provide: AXIS_DESIGN_OPTIONS_NODE_FOR_MENU, useValue: { current: node, parent } },
-          { provide: AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN, useValue: this.chooseComponent.bind(this) },
-        ]
-      })
-      this.menu.clear();
-      const ref = this.menu.createComponent(node.contextMenu, { injector: injector });
-      ref.instance.contextMenu(e);
-      ref.instance.onChange = (value: any) => {
-        this.onChangeOptionsConfig(value);
-      }
-    }
-  }
-
-  chooseComponent(...tags: string[]): Observable<{ options?: any, config?: DesignConfig }> {
-    this.chooseComponentTags.set(tags);
-    this.chooseComponentVisible.set(true);
-    const existsIds = new Set<string>();
-    return this.chooseComponentSubject.asObservable()
-      .pipe(take(1), map((example) => example?.builder((component, offset) => this.genNewComponentId(component, offset, existsIds))),
-        switchMap(options => options ? from(this.loader.loadComponent(`${options.component}/design`)).pipe(map(config => ({ options, config }))) : of({})));
-  }
-
-  private genNewComponentId(component: string, offset = 1, existsIds?: Set<string>): string {
-    let id: string;
-    if (this.componentsCounter.has(component)) {
-      id = `${component}#${this.componentsCounter.get(component)! + offset}`
-    } else {
-      id = `${component}#${offset}`
-    }
-    if (existsIds?.has(id) || this.optionsNodes.has(id)) {
-      return this.genNewComponentId(component, offset + 1, existsIds);
-    }
-    existsIds?.add(id);
-    return id;
-  }
-
-  onCmplibDragStart(example: Example, element: HTMLElement) {
-    const options = example.builder((component, offset) => this.genNewComponentId(component, offset));
-    const optionsNode = new OptionsNode({
-      canDrag: true,
-      dragType: "component",
-      rootOptions: options
-    });
-    this.optionsNodes.set(optionsNode.id, optionsNode);
-    this.preview.dragForOuter(optionsNode.toElementNode({ element }));
-  }
-
-  async onCmplibDragEnd() {
-    const nodeId = this.preview.dragEndForOuter();
-    if (nodeId) {
-      await this.loadAndOptions()![0];
-      this.tree.selectByNodeIds([nodeId]);
-      this.preview.selectByNodeIds([nodeId]);
-      this.loadSetting(nodeId);
-    }
-  }
-
-  onExamplePaste(examples: Example[]) {
-    const nodes: OptionsNode[] = []
-    for (const example of examples) {
-      const options = example.builder((component, offset) => this.genNewComponentId(component, offset));
-      const optionsNode = new OptionsNode({
-        canDrag: true,
-        dragType: "component",
-        rootOptions: options
-      });
-      nodes.push(optionsNode);
-      this.optionsNodes.set(optionsNode.id, optionsNode);
-    }
-    this.tree.addNodeForSelected(nodes);
-  }
-
-  onNodesMove(nodeIds: string[]) {
-    if (this.tree.selectListSelection.selected.length == 1) {
-      this.tree.addNodeForSelected(nodeIds.map(id => this.optionsNodes.get(id)!), true);
-    }
-  }
-
-  onEditorChange(optionsStr: string) {
-    try {
-      const options = JSON.parse(optionsStr);
-      this.onSettingChange(options);
-    } catch (_) { }
-  }
-
-  syncToSetting() {
-    if (this.settingOptionsNodeId) {
-      const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId);
-      if (optionsNode) {
-        const instance = (this.setting.get(0) as any)?.context as FunFieldValueBase | undefined;
-        instance?.writeValue(optionsNode.options);
-      }
-    }
-  }
-
-  syncToCode() {
-    if (this.settingOptionsNodeId) {
-      const optionsNode = this.optionsNodes.get(this.settingOptionsNodeId);
-      if (optionsNode) {
-        this.settingOptionsStr.set(JSON.stringify(optionsNode.options, null, "  "));
-      }
-    }
-    setTimeout(() => {
-      this.layoutEditor();
-    });
-  }
-
-  layoutEditor(e?: number[]) {
-    if (e) {
-      if (e[0] > 0) {
-        this.cacheSized[0] = e[0];
-      }
-      if (e[2] > 0) {
-        this.cacheSized[1] = e[2];
-      }
-    }
-    this.codeEditor?.onEvents?.({
-      target: "component",
-      name: "layout",
-    })?.subscribe();
-  }
-
-  private resetSetting() {
-    this.settingOptionsNodeId = undefined;
-    this.setting.clear();
-    this.settingOptionsStr.set("");
-  }
-
-  private reset(): void {
-    this.optionsNodes.clear();
-    this.componentsInfo.clear();
-    this.optionsNodeScopes.clear();
-    this.scopeInfos.clear();
-    this.componentsCounter.clear();
-  }
-
-  private getAllParentNodes(node: OptionsNode | string | undefined, parentNodes: OptionsNode[] = []): OptionsNode[] {
-    if (typeof node == "string") {
-      node = this.optionsNodes.get(node);
-    }
-    if (node?.parentId) {
-      const parent = this.optionsNodes.get(node.parentId);
-      if (parent) {
-        parentNodes.push(parent);
-        this.getAllParentNodes(parent, parentNodes);
-      }
-    }
-    return parentNodes;
-  }
-
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    for (const s of this.scopInfoSubjects.values()) {
-      s.unsubscribe();
-    }
-  }
-}

package/axis-components/design/ng-package.json

@@ -1,5 +0,0 @@
-{
-    "lib": {
-        "entryFile": "design.ts"
-    }
-}

package/axis-components/design/preview/drag.service.ts

@@ -1,148 +0,0 @@
-import { ElementNode, OptionsNode } from "ngx-axis-appforge/core";
-import { DropHandler } from "./drop-handler";
-import { Preview } from "./preview";
-
-export class DragService {
-
-    constructor(private preview: Preview) { }
-
-    private canDropNodes: ElementNode[] = [];
-    private oriDragDisplay?: string;
-    private readonly currentDropNodes = new Map<ElementNode, any>();
-    private dragEn?: ElementNode;
-    private dropHandler?: DropHandler;
-
-    initElement(node: OptionsNode, en: ElementNode) {
-        if (!node.isRoot && node.canDrag) {
-            this.bindDragEvent(en);
-        }
-        if (node.canDrop) {
-            this.canDropNodes.push(en);
-        }
-    }
-
-    private getOptionsNode(node: ElementNode): OptionsNode {
-        return this.preview.optionsNodes().get(node.id)!;
-    }
-
-    private bindDragEvent(node: ElementNode) {
-        node.element!.setAttribute("draggable", "true");
-        node.element!.ondragstart = (e) => {
-            e.stopPropagation();
-            this.dragStart(node);
-            this.oriDragDisplay = node.element!.style.display;
-            setTimeout(() => {
-                node.element!.style.display = "none";
-            });
-        };
-        node.element!.ondragend = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.dragEnd();
-        }
-    }
-
-    private bindDropEvent(en: ElementNode) {
-        this.currentDropNodes.set(en, null);
-        setTimeout(() => {
-            const { clientWidth, clientHeight } = en.dropElement!;
-            if (!clientWidth || !clientHeight) {
-                const { display, minWidth, minHeight } = en.dropElement!.style;
-                this.currentDropNodes.set(en,
-                    { display, minWidth, minHeight }
-                );
-                if (!clientWidth) {
-                    en.dropElement!.style.minWidth = "100px";
-                }
-                if (!clientHeight) {
-                    en.dropElement!.style.minHeight = "50px";
-                }
-                en.dropElement!.style.display = "block";
-            }
-        });
-        en.dropElement!.ondragenter = (e) => {
-            e?.preventDefault();
-            e.stopPropagation();
-            if (this.dropHandler?.dropNode == en) {
-                return;
-            }
-            this.dropHandler?.close();
-            const node = this.getOptionsNode(en);
-            this.dropHandler = new DropHandler(this.dragEn!, en, this.preview.elementOptionIds, node.childDirection == "horizontal");
-        }
-        en.dropElement!.ondragover = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.dropHandler?.onDragOver?.(e);
-        }
-    }
-
-    dragStart(dragEn: ElementNode) {
-        this.dragEn = dragEn;
-        this.canDropNodes = this.canDropNodes.filter(en => this.preview.optionsNodes().has(en.id));
-        this.canDropNodes
-            .filter(dropEn => {
-                const dropNode = this.getOptionsNode(dropEn);
-                const dragNode = this.getOptionsNode(dragEn);
-                return dropNode.dropType == dragNode.dragType && !dropNode.dropObj[dropNode.defaultDropIndex!] && dropEn.dropElement;
-            })
-            .forEach(node => this.bindDropEvent(node));
-        this.preview.onDragStart();
-    }
-
-    dragEnd(): string | undefined {
-        let dragId: string | undefined;
-        if (this.dropHandler) {
-            const dropEn = this.dropHandler.dropNode;
-            const dropNode = this.getOptionsNode(dropEn);
-            const dragNode = this.getOptionsNode(this.dragEn!);
-            let targetIndex = this.dropHandler.beforeElement ? this.preview.getNodeByElement(this.dropHandler.beforeElement)?.indexOfParentObj : dropNode?.defaultDropIndex;
-            if (dropNode!.dropObj == dragNode!.parentObj && dragNode!.indexOfParentObj == targetIndex) {
-                this.preview.onDragEnd(false);
-            } else {
-                dragId = dragNode?.id;
-                if (dropNode!.dropObj instanceof Array && dropNode!.dropObj == dragNode!.parentObj && dragNode!.indexOfParentObj! < targetIndex!) {
-                    (targetIndex as number)!--;
-                }
-                const dragObj = dragNode!.options;
-                if (!dragNode!.isRoot) {
-                    if (dragNode?.parentObj instanceof Array) {
-                        dragNode!.parentObj.splice(dragNode!.indexOfParentObj as number, 1);
-                    } else {
-                        dragNode!.parentObj[dragNode!.indexOfParentObj!] = null;
-                    }
-                }
-                if (dropNode?.dropObj instanceof Array) {
-                    dropNode!.dropObj.splice(targetIndex as number, 0, dragObj);
-                } else {
-                    dropNode!.dropObj[targetIndex!] = dragObj;
-                }
-                this.preview.onDragEnd(true);
-            }
-            this.dropHandler.onDragEnd();
-            this.dropHandler = undefined;
-        } else {
-            this.preview.onDragEnd(false);
-        }
-        this.dragEn!.element!.style.display = this.oriDragDisplay!;
-        this.dragEn = undefined;
-        this.oriDragDisplay = undefined;
-        this.currentDropNodes.forEach((style, en) => {
-            if (style) {
-                en.dropElement!.style.minWidth = style.minWidth;
-                en.dropElement!.style.minHeight = style.minHeight;
-                en.dropElement!.style.display = style.display;
-            }
-            en.dropElement!.ondragenter = null;
-            en.dropElement!.ondragover = null;
-        });
-        this.currentDropNodes.clear();
-        return dragId;
-    }
-
-    reset() {
-        this.dropHandler?.close();
-        this.dragEn = undefined;
-        this.dropHandler = undefined;
-    }
-}