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, onMounted } from "vue";
import { Container, Draggable } from "vue-dndrop";
import { useEditor } from "../../..";
import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
import { CompUI } from "../../CompUI";

import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
import { TipIcons } from "../../TipIcons";
import { CompBase } from "@/modules/editor/objects/Elements/base";

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();
    controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
    const editLayerRef = ref();

    onMounted(()=>{
      if (!flagRef.value) {
        flagRef.value = true;
        setTimeout(() => {
          actions.onViewReady(
            controls.compCtrl.getRootPage().$el,
            selectCanvasRef.value,
            viewportRef.value
          );
          // helper.initEditLayer(editLayerRef.value);
        }, 0);
      }
    })
    return () => {
      const pageRoot = controls.compCtrl.getRootPage();

      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 {
                              controls.compCtrl.switchCard(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}
                          />
                        )} */}

                        {/* { 
                          !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
                        } */}

                        {!state.draging && <SelectTransfer />}
                      </>
                    );
                  },
                  CompItem(c: CompBase<object>) {

                    const Comp = controls.compUICtrl.state.components.get(c.compKey)
                        ?.Component || NotFoundComp;

                    return (
                      <Draggable key={c.id}>
                        <Comp compId={c.id} />
                      </Draggable>
                    );
                  },
                }}
              </CompUI.Page.Component>
            </div>
            
            <div class={editLayerStyle} ref={editLayerRef}>
            </div>
            <canvas class={selectCls} ref={selectCanvasRef} />
          </div>
          <div class={meatureStyle}>
            <div class="ruler top" id="rulerTop"></div>
            <div class="ruler left" id="rulerLeft"></div>
            <div class="ruler right" id="rulerRight"></div>
            <div class="ruler bottom" id="rulerBottom"></div>
          </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;
`;

const meatureStyle = css`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1001;
  pointer-events: none;

  .ruler {
    position: absolute;
    cursor: ns-resize;
    pointer-events: auto;
  }
  .top {
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
  }
  .bottom {
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100%;
  }
  .left {
    top: 0;
    left: 0;
    height: 100%;
    width: 10px;
    cursor: ew-resize;
  }
  .right {
    top: 0;
    right: 0;
    height: 100%;
    width: 10px;
    cursor: ew-resize;
  }
`;

const editLayerStyle = css`
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
`