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, onMounted , ref} from "vue";
import { Container, Draggable, vueDndrop } 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 { DragAddCtrl } from "@/modules/editor/controllers/DragAddCtrl";

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();
    
    return () => {
      const pageRoot = helper.findRootComp();
      if (!pageRoot) return;
      const streamCardIndex = store.streamCardIds.indexOf(store.currStreamCardId)
      if (!flagRef.value ) {
        flagRef.value = true;
        setTimeout(() => {
          actions.onViewReady();
        }, 0);
      }

      return (
        <div class="scrollbar overflow-y-auto h-1/1">
          <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"
                        drop-placeholder={false}
                        animation-duration={0}
                        ref={containRef}
                        should-accept-drop={(sourceContainerOptions:any, payload:any)=>{
                          console.log("sourceContainerOptions:any, payload:any", sourceContainerOptions, payload)
                          if (sourceContainerOptions.groupName != "canvas") return false
                          controls.dragAddCtrl.updateCompKey(payload)
                          return false;
                        }}

                        drop-not-allowed = {
                          (p:any)=>{
                            console.log("p", p)
                          }
                        }
                        

                        onDrop={(e: any) => {
                          console.log( e );
                          return

                          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} />}
                    </>
                  );
                },
                CompItem(comp: DesignComp) {
                  const Comp =
                    controls.compUICtrl.state.components.get(comp.compKey)
                      ?.Component || NotFoundComp;
                  return (
                    <Draggable class="!flex flex-col" key={comp.id}>
                      <Comp compId={comp.id} />
                    
                    </Draggable>
                  );
                },
              }}
            </CompUI.Page.Component>
          </div>
        </div>
      );
    };
  },
});

const contentCls = css`
  .dndrop-container.vertical > .dndrop-draggable-wrapper {
    overflow: unset;
  }
`;