123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- 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";
- 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.isPreview) {
- // const cards = store.streamCardIds;
- // const index = cards.indexOf(props.compId)
- // style.position = "absolute";
- // style.top = index * 100 + "vh";
- style.height = "100vh"
- }
- 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;
- `
|