queenshow/src/modules/editor/components/Viewport/Content/index.tsx

import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { css } from "@linaria/core";
import { defineUI } from "queenjs";
import { onUnmounted, reactive, ref } from "vue";
import { Container, Draggable } from "vue-dndrop";
import { useEditor } from "../../..";
import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
import { CompUI } from "../../CompUI";
import { Transfer } from "../../CompUI/basicUI/Transfer";
import { StreamCardTransfer } from "../../CompUI/basicUI/Transfer/streamCard";
import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";

export default defineUI({
  setup() {
    const editor = useEditor();
    const { store, actions, helper, controls } = editor;

    const hotKeyCtrl = new HotKeyCtrl(editor);
    hotKeyCtrl.init();
    onUnmounted(() => {
      hotKeyCtrl.destroy();
    });

    const state = reactive({
      draging: false,
    });

    const NotFoundComp = () => <div>无效的组件</div>;
    const flagRef = ref();
    const containRef = ref();
    const selectCanvasRef = ref();
    const viewportRef = ref();

    return () => {
      const pageRoot = helper.findRootComp();
      if (!pageRoot) return;
      const streamCardIndex = store.streamCardIds.indexOf(
        store.currStreamCardId
      );
      if (!flagRef.value) {
        flagRef.value = true;
        setTimeout(() => {
          actions.onViewReady(
            pageRoot.$el,
            selectCanvasRef.value,
            viewportRef.value
          );
        }, 0);
      }

      return (
        <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
          <div class="relative">
            <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
              <CompUI.Page.Component compId={pageRoot.id}>
                {{
                  Container(children: any) {
                    return (
                      <>
                        <Container
                          behaiver="drop-zone"
                          class={store.isEditPage ? "!min-h-750px" : ""}
                          // drag-handle-selector=".draganchor"
                          ref={containRef}
                          should-accept-drop={(
                            sourceContainerOptions: any,
                            payload: any
                          ) => {
                            if (sourceContainerOptions.groupName != "canvas") {
                              return false;
                            }
                            if (typeof payload == "string")
                              controls.dragAddCtrl.updateCompKey(payload);
                            else {
                              controls.dragAddCtrl.updateCompKey(payload.type);
                              controls.dragAddCtrl.updateCompData(payload.data);
                            }
                            return false;
                          }}
                          drop-not-allowed={(p: any) => {
                            console.log("p", p);
                          }}
                          onDrop={(e: any) => {
                            if (e.payload) {
                              actions.addCompToDesign(e.payload, e.addedIndex);
                            } else {
                              actions.moveComp(e.removedIndex, e.addedIndex);
                            }
                          }}
                          onDragStart={() => (state.draging = true)}
                          onDragEnd={() => {
                            state.draging = false;
                          }}
                          non-drag-area-selector={".drag-disable"}
                        >
                          {children}
                        </Container>
                        {/* {store.currStreamCardId && (
                          <StreamCardTransfer
                            key={store.currStreamCardId + streamCardIndex}
                          />
                        )} */}

                        {/* {store.currCompId &&
                          store.currStreamCardId &&
                          store.currCompId !== "root" &&
                          !store.textEditingState &&
                          store.currCompId !== store.currStreamCardId &&
                          !state.draging && (
                            <Transfer key={store.currCompId + streamCardIndex} />
                          )} */}
                        {!state.draging && <SelectTransfer />}
                      </>
                    );
                  },
                  CompItem(comp: DesignComp) {
                    const Comp =
                      controls.compUICtrl.state.components.get(comp.compKey)
                        ?.Component || NotFoundComp;
                    return (
                      <Draggable key={comp.id}>
                        <Comp compId={comp.id} />
                      </Draggable>
                    );
                  },
                }}
              </CompUI.Page.Component>
            </div>
            <canvas class={selectCls} ref={selectCanvasRef} />
          </div>
        </div>
      );
    };
  },
});

const contentCls = css`
  .dndrop-container.vertical > .dndrop-draggable-wrapper {
    overflow: unset;
  }
`;
const selectCls = css`
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
`;