queenshow/src/modules/editor/components/CompUI/basicUI/View.tsx

import { IconAdd, IconMove } from "@/assets/icons";
import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
import { css } from "@linaria/core";
import { IconDelete } from "@queenjs/icons";
import { defineComponent, onMounted, ref } from "vue";
import { string, bool } from "vue-types";
import { useEditor } from "../../..";
import { useCompRef, useCompEditLayerRef } from "./hooks";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";

export const View = defineComponent({
  props: {
    compId: string().isRequired,
    editlayer: bool().def(true),
  },
  emits: ["dblclick", "click"],
  setup(props, { slots, emit }) {
    const { store, actions, helper, controls } = useEditor();
    const compRef = useCompRef(props.compId);
    const editorLayerRef = props.editlayer
      ? useCompEditLayerRef(props.compId)
      : ref();

    return () => {
      const comp = helper.findComp(props.compId);
      if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
      const isStreamCard = helper.isStreamCard(props.compId);
      const isGroupComp = helper.isGroupComp(props.compId);
      const isStreamChild = helper.isStreamCardChild(props.compId);

      const obj = new CompObject(store.compMap[props.compId]);
      const m = obj.worldTransform.clone();
      m.invert();

      let isFocus =
        store.isEditMode &&
        store.selected.length > 1 &&
        store.lastSelected == props.compId;
      isFocus = isFocus || store.currCompId == props.compId;

      const style = helper.createStyle(comp.layout, comp);
      const page = helper.findRootComp() as DesignComp;

      if (isStreamCard && page.value.pageMode == "short" && store.isDisplay) {
        //  const cards = store.streamCardIds;
        //  const index = cards.indexOf(props.compId)
        //  style.position = "absolute";
        //  style.top = index * 100  + "vh";
        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
          adaptiveH: true,
        });
      }

      if (comp.anim && comp.anim.transition) {
          style.transition = "all 1s ease-out";
      }

      return (
        <div
          ref={compRef}
          class={[
            viewStyle,
            store.isEditMode &&
              controls.selectCtrl._state != 0 &&
              editCompStyle,
            isGroupComp && groupCompCls,
            store.currStreamCardId == props.compId && CurrCompStyle,
            isFocus && AnchorCompStyle,
          ]}
          style={style}
          onClick={(e) => {
            if (!store.isEditMode) {
              e.stopPropagation();
              emit("click");
            }
          }}
          onDblclick={() => emit("dblclick")}
        >
          <div
            onMousemove={(e) => {
              if (
                !store.isEditMode ||
                !controls.dragAddCtrl.dragingCompKey ||
                !helper.isStreamCard(props.compId)
              )
                return;
              actions.pickComp(props.compId);
            }}
          >
            {slots.default?.()}
          </div>

          {store.isEditMode &&
            isStreamCard &&
            store.currStreamCardId == props.compId && (
              <Hudop compId={props.compId} />
            )}

          {store.isEditMode && props.editlayer && (
            <div ref={editorLayerRef} class={editAreaStyle}></div>
          )}
        </div>
      );
    };
  },
});

export const Hudop = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { store, actions, helper, controls } = useEditor();

    const opref = ref();

    onMounted(() => {
      opref.value.editable = "hudop";
    });

    return () => (
      <div class="hudop shadow" ref={opref}>
        {store.streamCardIds.length > 1 && (
          <IconMove
            class="draganchor"
            onMousedown={() => actions.pickComp(props.compId)}
          />
        )}
        {store.streamCardIds.length > 1 && (
          <IconDelete
            onClick={(e: any) => {
              e.stopPropagation();
              actions.removeStreamCard(props.compId);
            }}
          />
        )}
        <IconAdd
          onClick={(e: any) => {
            e.stopPropagation();
            const index = store.streamCardIds.indexOf(props.compId) + 1;
            actions.addCompToDesign("Container", index);
          }}
        />
      </div>
    );
  },
});

const viewStyle = css`
  position: relative;
  font-size: 0;
  cursor: pointer;

  > :first-child {
    width: 100%;
    height: 100%;
  }

  .hudop {
    position: absolute;
    top: 0px;
    left: -46px;
    background-color: white;
    flex-direction: column;
    color: black;
    display: flex;
    font-size: 12px;
    width: 28px;
    align-items: center;
    border-radius: 4px;
    z-index: 997;
    .inficon {
      padding: 8px;
    }
  }
`;

const editCompStyle = css`
  &:hover {
    outline: 2px dashed @inf-primary-color;
  }
`;

const AnchorCompStyle = css`
  outline: 2px dashed @inf-primary-color;
`;

const CurrCompStyle = css`
  position: relative;
  outline: 1px solid @inf-primary-color;
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
  z-index: 998;
`;

const groupCompCls = css`
  outline: 2px solid @inf-primary-color !important;
`;

const editAreaStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
`;

const editAreaTestStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
`;