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 } from "vue-types";
import { useEditor } from "../../..";
import { useCompRef } from "./hooks";

export const View = defineComponent({
  props: {
    compId: string().isRequired,
  },
  emits: ["dblclick"],
  setup(props, { slots, emit }) {
    const { store, actions, helper, controls } = useEditor();
    const compRef = useCompRef(props.compId);

    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 obj = new CompObject(store.compMap[props.compId]);
      const m = obj.worldTransform.clone();
      m.invert();

      return (
        <div
          ref={compRef}
          class={[
            viewStyle,
            store.isEditMode && editCompStyle,
            isGroupComp && groupCompCls,
            store.currStreamCardId == props.compId && CurrCompStyle,
          ]}
          style={helper.createStyle(comp.layout)}
          onClick={(e) => {
            e.stopPropagation();
            if (store.isEditMode) {
              actions.pickComp(props.compId);
            }
          }}
          onDblclick={() => emit("dblclick")}
        >
          <div
            // onMousedown={(e) => {
            //   if (helper.isGroupCompChild(props.compId)) return;
            //   e.stopPropagation();

            //   if (store.isEditMode) {
            //     actions.pickComp(props.compId);
            //   }
            // }}

            onMousemove={(e) => {
              if (
                !store.isEditMode ||
                !controls.dragAddCtrl.dragingCompKey ||
                !helper.isStreamCard(props.compId)
              )
                return;
              actions.pickComp(props.compId);
            }}
          >
            {slots.default?.()}
          </div>
          {store.isEditMode && isStreamCard && <Hudop compId={props.compId} />}
        </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" 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;
    .inficon {
      padding: 8px;
    }
    z-index: 999;
  }
`;

const editCompStyle = css`
  &:hover {
    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;
`;