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 { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
import { TipIcons } from "../../TipIcons";

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();

    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
          );
          helper.initEditLayer(editLayerRef.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}
                          />
                        )} */}

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

                        {!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>

            <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: 56px;
  z-index: 999;
  pointer-events: none;

  .ruler {
    position: absolute;
    cursor: ns-resize;
    pointer-events: auto;
  }
  .top {
    top: 0;
    left: 0;
    height: 20px;
    width: 100%;
    z-index: 2;
    background-color: rgba(38, 38, 38, 0.8);
    background-image: repeating-linear-gradient(
        90deg,
        #434343 0,
        #434343 1px,
        transparent 0,
        transparent 1cm
      ),
      repeating-linear-gradient(
        90deg,
        #434343 0,
        #434343 1px,
        transparent 0,
        transparent 0.5cm
      );
    border-bottom: 1px solid #434343;
    background-position: 0.5cm 100%;
    background-repeat: no-repeat;
    background-size: 100% 15px, 100% 10px;
  }
  .bottom {
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100%;
  }
  .left {
    top: 0;
    left: 0;
    height: 100%;
    width: 20px;
    z-index: 1;
    cursor: ew-resize;
    border-right: 1px solid #434343;
    background-color: rgba(38, 38, 38, 0.8);
    background-image: repeating-linear-gradient(
        180deg,
        #434343 0,
        #434343 1px,
        transparent 0,
        transparent 1cm
      ),
      repeating-linear-gradient(
        180deg,
        #434343 0,
        #434343 1px,
        transparent 0,
        transparent 0.5cm
      );

    background-position: 100% 0.5cm;
    background-repeat: no-repeat;
    background-size: 15px 100%, 10px 100%;
  }
  .right {
    top: 0;
    right: 0;
    height: 100%;
    width: 20px;
    cursor: ew-resize;
  }
`;

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