queenshow/src/modules/editor/controllers/DragAddCtrl/index.ts

import { ModuleControl } from "queenjs";
import { EditorModule } from "../../module";

type sourceType = {
  _id?: string;
  file?: {
    url?: string;
  };
};

export class DragAddCtrl extends ModuleControl<EditorModule> {
  dragingCompKey = "";
  dragingCompData: sourceType = {};

  _cancel?: () => void;
  _mouseUping = false;

  updateCompKey(k: string) {
    if (this._mouseUping) return;

    const isSame = k == this.dragingCompKey;
    this.dragingCompKey = k;
    if (!isSame && k) {
      if (this._cancel) this._cancel();
      this._cancel = this.initEvent();
    }
  }

  updateCompData(data: object) {
    this.dragingCompData = data;
  }

  async dragComp(e: MouseEvent) {
    const scope = this;
    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any, scope.dragingCompData);
    if (
      scope.dragingCompData?._id &&
      (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
    ) {
      scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
      scope.dragingCompData = {};
    }
    scope.dragingCompKey = "";
  }

  async dragTpl() {
    await this.actions.clickFrameToDesign(this.dragingCompData);
    this.dragingCompKey = "";
  }

  initEvent() {
    const scope = this;

    async function mouseup(e: MouseEvent) {
      console.log("mouseup=>", scope.dragingCompKey);
      scope._mouseUping = true;
      setTimeout(() => {
        scope._mouseUping = false;
      }, 1000);

      if (scope._cancel) scope._cancel();
      if (!scope.dragingCompKey) return;

      if (scope.dragingCompKey == "tpl") {
        scope.dragTpl();
      } else {
        scope.dragComp(e);
      }
    }

    document.addEventListener("mouseup", mouseup);

    return () => {
      document.removeEventListener("mouseup", mouseup);
      scope._cancel = undefined;
    };
  }
}