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; `;