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

import { IconDelete } from "@/assets/icons";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { css, cx } from "@linaria/core";
import { defineUI } from "queenjs";
import { nextTick, 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";
import { history } from "@/modules/editor/objects/DesignTemp/factory";

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

    const refs = controls.editorCtrl.useEditor();

    return () => {
      console.log("rootId=>", controls.pageCtrl.state.rootId );
      const page = controls.pageCtrl;

      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,
            refs.canvas.value,
            refs.parent.value
          );
          helper.initEditLayer(editLayerRef.value);
        }, 100);
      }

      return (
        <div class="flex flex-1 relative">
          <div class={["scrollbar", cardList]}>
            <div>
              <Container
                class="space-y-15px mt-15px"
                onDrop={(e: any) => {
                  if (e.payload) {
                    actions.addCompToDesign(e.payload, e.addedIndex);
                  } else {
                    actions.moveComp(e.removedIndex, e.addedIndex);
                  }
                }}
              >
                {page.streamCardIds.map((item) => {
                  const c = helper.findComp(item) as DesignComp;
                  const Comp =
                    controls.compUICtrl.state.components.get(c.compKey)
                      ?.Component || NotFoundComp;

                  const r = c.layout.size[1] / c.layout.size[0];
                  let h = 80 * r;
                  if (h > 80) h = 80;
                  if (h < 40) h = 40;

                  const style: any = { height: h + "px" };
                  return (
                    <Draggable>
                      <div
                        key={item + controls.screenCtrl.currScreenId}
                        class={cx(
                          "card-item relative transition-opacity hover:opacity-80",
                          store.currStreamCardId == item && "active"
                        )}
                        style={style}
                        onClick={() => {
                          controls.editorCtrl.clickPickComp(item);
                          history.submit();

                          nextTick(() => {
                            controls.editorCtrl.autoInScreen();
                          });
                        }}
                      >
                        {page.streamCardIds.length > 1 && (
                          <IconDelete
                            onClick={() => {
                              actions.removeStreamCard(item);
                            }}
                            class="deleteitem absolute right-4px top-4px text-light-50"
                          />
                        )}
                        <div class="pointer-events-none">
                          <Comp
                            compId={c.id}
                            style={{
                              transformOrigin: "0 0",
                              pointerEvent: "none",
                              transform: `scale(${
                                80.0 / helper.designSizeToPx(c.layout.size[0])
                              })`,
                            }}
                          />
                        </div>
                      </div>
                    </Draggable>
                  );
                })}
                <img
                  class="mt-15px cursor-pointer"
                  onClick={() => {
                    const index = page.streamCardIds.length;
                    actions.addCompToDesign("Container", index);
                    history.submit();

                    setTimeout(() => {
                      controls.editorCtrl.autoInScreen();
                    }, 200);
                  }}
                  src={require("@/assets/imgs/add.svg")}
                  alt=""
                />
              </Container>
            </div>
          </div>
          <div ref={refs.parent} class={["absolute", viewportStyle]}>
            <div ref={refs.editor}>
              <div ref={refs.page} class={"select-none " + contentCls}>
                <CompUI.Page.Component compId={pageRoot.id}>
                  {{
                    Container(children: any) {
                      return (
                        <>
                          <Container
                            behaiver="drop-zone"
                            should-accept-drop={(
                              sourceContainerOptions: any,
                              payload: any
                            ) => {
                              if (
                                sourceContainerOptions.groupName != "canvas"
                              ) {
                                return false;
                              }

                              console.log("payload===>", "xxx", payload);

                              if (typeof payload == "string") {
                                controls.dragAddCtrl.updateCompKey(payload);
                              } else {
                                controls.dragAddCtrl.updateCompKey(
                                  payload.type
                                );
                                controls.dragAddCtrl.updateCompData(
                                  payload.data
                                );
                              }
                              return false;
                            }}
                            onDrop={(e: any) => {
                              debugger;
                              if (e.payload) {
                                console.log("xx a");
                                actions.addCompToDesign(
                                  e.payload,
                                  e.addedIndex
                                );
                              }
                            }}
                          >
                            {children}
                          </Container>
                          {!state.draging && <SelectTransfer />}
                        </>
                      );
                    },
                    CompItem(comp: DesignComp) {
                      const Comp =
                        controls.compUICtrl.state.components.get(comp.compKey)
                          ?.Component || NotFoundComp;
                      return (
                        <Comp
                          compId={comp.id}
                          key={comp.id + controls.screenCtrl.currScreenId}
                          showMask={true}
                        />
                      );
                    },
                  }}
                </CompUI.Page.Component>
              </div>
              <div class={editLayerStyle} ref={editLayerRef}></div>
            </div>
            <canvas class={selectCls} ref={refs.canvas} />

            {/* <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>
        </div>
      );
    };
  },
});

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

const meatureStyle = css`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0px;
  z-index: 998;
  pointer-events: none;
  .ruler {
    position: absolute;
    cursor: ns-resize;
    pointer-events: auto;
  }
  .top {
    top: 0;
    left: 0px;
    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: 0px;
    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;
`;

const cardList = css`
  width: 120px;
  height: 100%;
  background: #1f1f1f;
  overflow-x: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  padding-bottom: 120px;

  .card-item {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #1f1f1f;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    overflow: hidden;
    color: white;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 4px;
      z-index: 1;
      transition: box-shadow 0.2s ease-in-out;
    }
    &.active {
      &:before {
        box-shadow: #ea9e40 0px 0px 0px 1px inset, #000 0px 0px 0px 3px inset;
      }
    }
    .deleteitem {
      z-index: 1000;
      opacity: 0;
      font-size: 20px;
    }

    &:hover {
      .deleteitem {
        opacity: 1;
        background: rgba(0, 0, 0, 0.8);
      }
    }
  }
`;

const viewportStyle = css`
  width: calc(100% - 120px);
  height: 100%;
  left: 120px;
  top: 0px;
  overflow: hidden;
`;