View.tsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. import { IconAdd, IconMove } from "@/assets/icons";
  2. import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
  3. import { css } from "@linaria/core";
  4. import { IconDelete } from "@queenjs/icons";
  5. import { defineComponent, onMounted, ref } from "vue";
  6. import { string ,bool} from "vue-types";
  7. import { useEditor } from "../../..";
  8. import { useCompRef , useCompEditLayerRef} from "./hooks";
  9. import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
  10. export const View = defineComponent({
  11. props: {
  12. compId: string().isRequired,
  13. editlayer: bool().def(true),
  14. },
  15. emits: ["dblclick", "click"],
  16. setup(props, { slots, emit }) {
  17. const { store, actions, helper, controls } = useEditor();
  18. const compRef = useCompRef(props.compId);
  19. const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
  20. return () => {
  21. const comp = helper.findComp(props.compId);
  22. if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
  23. const isStreamCard = helper.isStreamCard(props.compId);
  24. const isGroupComp = helper.isGroupComp(props.compId);
  25. const isStreamChild = helper.isStreamCardChild(props.compId);
  26. const obj = new CompObject(store.compMap[props.compId]);
  27. const m = obj.worldTransform.clone();
  28. m.invert();
  29. let isFocus = store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId;
  30. isFocus = isFocus || store.currCompId == props.compId;
  31. const style = helper.createStyle(comp.layout, comp);
  32. const page = helper.findRootComp() as DesignComp;
  33. if (isStreamCard && page.value.pageMode == "short" && store.isPreview) {
  34. // const cards = store.streamCardIds;
  35. // const index = cards.indexOf(props.compId)
  36. // style.position = "absolute";
  37. // style.top = index * 100 + "vh";
  38. style.height = "100vh"
  39. }
  40. if (comp.anim && comp.anim.transition) {
  41. style.transition = "all 1s ease-out";
  42. }
  43. return (
  44. <div
  45. ref={compRef}
  46. class={[
  47. viewStyle,
  48. store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
  49. isGroupComp && groupCompCls,
  50. store.currStreamCardId == props.compId && CurrCompStyle,
  51. isFocus && AnchorCompStyle
  52. ]}
  53. style={style}
  54. onClick={(e) => {
  55. if (!store.isEditMode) {
  56. e.stopPropagation();
  57. emit("click");
  58. }
  59. }}
  60. onDblclick={() => emit("dblclick")}
  61. >
  62. <div
  63. onMousemove={(e) => {
  64. if (
  65. !store.isEditMode ||
  66. !controls.dragAddCtrl.dragingCompKey ||
  67. !helper.isStreamCard(props.compId)
  68. )
  69. return;
  70. actions.pickComp(props.compId);
  71. }}
  72. >
  73. {slots.default?.()}
  74. </div>
  75. {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
  76. {
  77. store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
  78. </div>
  79. }
  80. </div>
  81. );
  82. };
  83. },
  84. });
  85. export const Hudop = defineComponent({
  86. props: {
  87. compId: string().isRequired,
  88. },
  89. setup(props) {
  90. const { store, actions, helper, controls } = useEditor();
  91. const opref = ref();
  92. onMounted(() => {
  93. opref.value.editable = "hudop";
  94. });
  95. return () => (
  96. <div class="hudop shadow" ref={opref}>
  97. {store.streamCardIds.length > 1 && (
  98. <IconMove
  99. class="draganchor"
  100. onMousedown={() => actions.pickComp(props.compId)}
  101. />
  102. )}
  103. {store.streamCardIds.length > 1 && (
  104. <IconDelete
  105. onClick={(e: any) => {
  106. e.stopPropagation();
  107. actions.removeStreamCard(props.compId);
  108. }}
  109. />
  110. )}
  111. <IconAdd
  112. onClick={(e: any) => {
  113. e.stopPropagation();
  114. const index = store.streamCardIds.indexOf(props.compId) + 1;
  115. actions.addCompToDesign("Container", index);
  116. }}
  117. />
  118. </div>
  119. );
  120. },
  121. });
  122. const viewStyle = css`
  123. position: relative;
  124. font-size: 0;
  125. cursor: pointer;
  126. > :first-child {
  127. width: 100%;
  128. height: 100%;
  129. }
  130. .hudop {
  131. position: absolute;
  132. top: 0px;
  133. left: -46px;
  134. background-color: white;
  135. flex-direction: column;
  136. color: black;
  137. display: flex;
  138. font-size: 12px;
  139. width: 28px;
  140. align-items: center;
  141. border-radius: 4px;
  142. z-index: 997;
  143. .inficon {
  144. padding: 8px;
  145. }
  146. }
  147. `;
  148. const editCompStyle = css`
  149. &:hover {
  150. outline: 2px dashed @inf-primary-color;
  151. }
  152. `;
  153. const AnchorCompStyle = css`
  154. outline: 2px dashed @inf-primary-color;
  155. `;
  156. const CurrCompStyle = css`
  157. position: relative;
  158. outline: 1px solid @inf-primary-color;
  159. box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
  160. z-index: 998;
  161. `;
  162. const groupCompCls = css`
  163. outline: 2px solid @inf-primary-color !important;
  164. `;
  165. const editAreaStyle = css`
  166. position: absolute;
  167. top: 0;
  168. left: 0;
  169. width: 100%;
  170. height: 100%;
  171. pointer-events: none;
  172. `
  173. const editAreaTestStyle = css`
  174. position: absolute;
  175. top: 0;
  176. left: 0;
  177. width: 100px;
  178. height: 100px;
  179. background-color: red;
  180. `