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 ?
无效组件
: 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 (
{
e.stopPropagation();
if (store.isEditMode) {
actions.pickComp(props.compId);
}
}}
onDblclick={() => emit("dblclick")}
>
{
// 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?.()}
{store.isEditMode && isStreamCard &&
}
);
};
},
});
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 () => (
{store.streamCardIds.length > 1 && (
actions.pickComp(props.compId)}
/>
)}
{store.streamCardIds.length > 1 && (
{
e.stopPropagation();
actions.removeStreamCard(props.compId);
}}
/>
)}
{
e.stopPropagation();
const index = store.streamCardIds.indexOf(props.compId) + 1;
actions.addCompToDesign("Container", index);
}}
/>
);
},
});
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;
`;