index.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
  2. import { css } from "@linaria/core";
  3. import { defineUI } from "queenjs";
  4. import { onUnmounted, reactive, onMounted , ref} from "vue";
  5. import { Container, Draggable, vueDndrop } from "vue-dndrop";
  6. import { useEditor } from "../../..";
  7. import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
  8. import { CompUI } from "../../CompUI";
  9. import { Transfer } from "../../CompUI/basicUI/Transfer";
  10. import { StreamCardTransfer } from "../../CompUI/basicUI/Transfer/streamCard";
  11. import { DragAddCtrl } from "@/modules/editor/controllers/DragAddCtrl";
  12. export default defineUI({
  13. setup() {
  14. const editor = useEditor();
  15. const { store, actions, helper, controls } = editor;
  16. const hotKeyCtrl = new HotKeyCtrl(editor);
  17. hotKeyCtrl.init();
  18. onUnmounted(() => {
  19. hotKeyCtrl.destroy();
  20. });
  21. const state = reactive({
  22. draging: false,
  23. });
  24. const NotFoundComp = () => <div>无效的组件</div>;
  25. const flagRef = ref();
  26. const containRef = ref();
  27. return () => {
  28. const pageRoot = helper.findRootComp();
  29. if (!pageRoot) return;
  30. const streamCardIndex = store.streamCardIds.indexOf(store.currStreamCardId)
  31. if (!flagRef.value ) {
  32. flagRef.value = true;
  33. setTimeout(() => {
  34. actions.onViewReady();
  35. }, 0);
  36. }
  37. return (
  38. <div class="scrollbar overflow-y-auto h-1/1">
  39. <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
  40. <CompUI.Page.Component compId={pageRoot.id}>
  41. {{
  42. Container(children: any) {
  43. return (
  44. <>
  45. <Container
  46. behaiver = "drop-zone"
  47. class={store.isEditPage ? "!min-h-750px" : ""}
  48. drag-handle-selector=".draganchor"
  49. drop-placeholder={false}
  50. animation-duration={0}
  51. ref={containRef}
  52. should-accept-drop={(sourceContainerOptions:any, payload:any)=>{
  53. console.log("sourceContainerOptions:any, payload:any", sourceContainerOptions, payload)
  54. if (sourceContainerOptions.groupName != "canvas") return false
  55. controls.dragAddCtrl.updateCompKey(payload)
  56. return false;
  57. }}
  58. drop-not-allowed = {
  59. (p:any)=>{
  60. console.log("p", p)
  61. }
  62. }
  63. onDrop={(e: any) => {
  64. console.log( e );
  65. return
  66. if (e.payload) {
  67. actions.addCompToDesign(e.payload, e.addedIndex);
  68. } else {
  69. actions.moveComp(e.removedIndex, e.addedIndex);
  70. }
  71. }}
  72. onDragStart={() => (state.draging = true)}
  73. onDragEnd={() => (state.draging = false)}
  74. non-drag-area-selector={".drag-disable"}
  75. >
  76. {children}
  77. </Container>
  78. {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId + streamCardIndex} />}
  79. {store.currCompId &&
  80. store.currStreamCardId &&
  81. store.currCompId !== "root" &&
  82. !store.textEditingState &&
  83. store.currCompId !== store.currStreamCardId &&
  84. !state.draging && <Transfer key={store.currCompId + streamCardIndex} />}
  85. </>
  86. );
  87. },
  88. CompItem(comp: DesignComp) {
  89. const Comp =
  90. controls.compUICtrl.state.components.get(comp.compKey)
  91. ?.Component || NotFoundComp;
  92. return (
  93. <Draggable class="!flex flex-col" key={comp.id}>
  94. <Comp compId={comp.id} />
  95. </Draggable>
  96. );
  97. },
  98. }}
  99. </CompUI.Page.Component>
  100. </div>
  101. </div>
  102. );
  103. };
  104. },
  105. });
  106. const contentCls = css`
  107. .dndrop-container.vertical > .dndrop-draggable-wrapper {
  108. overflow: unset;
  109. }
  110. `;