123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
- import { css } from "@linaria/core";
- import { defineUI } from "queenjs";
- import { onUnmounted, reactive, onMounted , ref} from "vue";
- import { Container, Draggable, vueDndrop } from "vue-dndrop";
- import { useEditor } from "../../..";
- import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
- import { CompUI } from "../../CompUI";
- import { Transfer } from "../../CompUI/basicUI/Transfer";
- import { StreamCardTransfer } from "../../CompUI/basicUI/Transfer/streamCard";
- import { DragAddCtrl } from "@/modules/editor/controllers/DragAddCtrl";
- export default defineUI({
- setup() {
- const editor = useEditor();
- const { store, actions, helper, controls } = editor;
- const hotKeyCtrl = new HotKeyCtrl(editor);
- hotKeyCtrl.init();
- onUnmounted(() => {
- hotKeyCtrl.destroy();
- });
- const state = reactive({
- draging: false,
- });
- const NotFoundComp = () => <div>无效的组件</div>;
- const flagRef = ref();
- const containRef = ref();
-
- return () => {
- const pageRoot = helper.findRootComp();
- if (!pageRoot) return;
- const streamCardIndex = store.streamCardIds.indexOf(store.currStreamCardId)
- if (!flagRef.value ) {
- flagRef.value = true;
- setTimeout(() => {
- actions.onViewReady();
- }, 0);
- }
- return (
- <div class="scrollbar overflow-y-auto h-1/1">
- <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
- <CompUI.Page.Component compId={pageRoot.id}>
- {{
- Container(children: any) {
- return (
- <>
- <Container
- behaiver = "drop-zone"
-
- class={store.isEditPage ? "!min-h-750px" : ""}
- drag-handle-selector=".draganchor"
- drop-placeholder={false}
- animation-duration={0}
- ref={containRef}
- should-accept-drop={(sourceContainerOptions:any, payload:any)=>{
- console.log("sourceContainerOptions:any, payload:any", sourceContainerOptions, payload)
- if (sourceContainerOptions.groupName != "canvas") return false
- controls.dragAddCtrl.updateCompKey(payload)
- return false;
- }}
- drop-not-allowed = {
- (p:any)=>{
- console.log("p", p)
- }
- }
-
- onDrop={(e: any) => {
- console.log( e );
- return
- if (e.payload) {
- actions.addCompToDesign(e.payload, e.addedIndex);
- } else {
- actions.moveComp(e.removedIndex, e.addedIndex);
- }
- }}
- onDragStart={() => (state.draging = true)}
- onDragEnd={() => (state.draging = false)}
- non-drag-area-selector={".drag-disable"}
- >
- {children}
- </Container>
- {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId + streamCardIndex} />}
- {store.currCompId &&
- store.currStreamCardId &&
- store.currCompId !== "root" &&
- !store.textEditingState &&
- store.currCompId !== store.currStreamCardId &&
- !state.draging && <Transfer key={store.currCompId + streamCardIndex} />}
- </>
- );
- },
- CompItem(comp: DesignComp) {
- const Comp =
- controls.compUICtrl.state.components.get(comp.compKey)
- ?.Component || NotFoundComp;
- return (
- <Draggable class="!flex flex-col" key={comp.id}>
- <Comp compId={comp.id} />
-
- </Draggable>
- );
- },
- }}
- </CompUI.Page.Component>
- </div>
- </div>
- );
- };
- },
- });
- const contentCls = css`
- .dndrop-container.vertical > .dndrop-draggable-wrapper {
- overflow: unset;
- }
- `;
|