ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/design/design.ts

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

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

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

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