Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -1,5 +1,5 @@
 import { useEditor } from "@/modules/editor";
-import { defineComponent } from "vue";
+import { defineComponent, watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -15,7 +15,6 @@ export const Component = defineComponent({
 
     function setImageSize(url: string) {
       if (!helper.isStreamCardChild(props.compId)) return;
-
       const temImg = new Image();
       temImg.src = url;
 
@@ -34,12 +33,16 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
-        setImageSize(url);
       } catch (error) {
         console.log(error);
       }
     }
 
+    watch(
+      () => comp.value.url,
+      () => setImageSize(comp.value.url)
+    );
+
     return () => {
       const value = comp.value;
       const scale = value?.s || 1;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -40,7 +40,11 @@ export default defineUI({
       if (!flagRef.value) {
         flagRef.value = true;
         setTimeout(() => {
-          actions.onViewReady(pageRoot.$el, selectCanvasRef.value, viewportRef.value);
+          actions.onViewReady(
+            pageRoot.$el,
+            selectCanvasRef.value,
+            viewportRef.value
+          );
         }, 0);
       }
 
@@ -62,14 +66,15 @@ export default defineUI({
                             sourceContainerOptions: any,
                             payload: any
                           ) => {
-                            console.log(
-                              "sourceContainerOptions:any, payload:any",
-                              sourceContainerOptions,
-                              payload
-                            );
-                            if (sourceContainerOptions.groupName != "canvas")
+                            if (sourceContainerOptions.groupName != "canvas") {
                               return false;
-                            controls.dragAddCtrl.updateCompKey(payload);
+                            }
+                            if (typeof payload == "string")
+                              controls.dragAddCtrl.updateCompKey(payload);
+                            else {
+                              controls.dragAddCtrl.updateCompKey(payload.type);
+                              controls.dragAddCtrl.updateCompData(payload.data);
+                            }
                             return false;
                           }}
                           drop-not-allowed={(p: any) => {
@@ -84,7 +89,7 @@ export default defineUI({
                           }}
                           onDragStart={() => (state.draging = true)}
                           onDragEnd={() => {
-                            state.draging = false
+                            state.draging = false;
                           }}
                           non-drag-area-selector={".drag-disable"}
                         >
@@ -104,9 +109,7 @@ export default defineUI({
                           !state.draging && (
                             <Transfer key={store.currCompId + streamCardIndex} />
                           )} */}
-                        {
-                          !state.draging && <SelectTransfer />
-                        }
+                        {!state.draging && <SelectTransfer />}
                       </>
                     );
                   },
@@ -123,7 +126,7 @@ export default defineUI({
                 }}
               </CompUI.Page.Component>
             </div>
-            <canvas class={selectCls}  ref={selectCanvasRef} />
+            <canvas class={selectCls} ref={selectCanvasRef} />
           </div>
         </div>
       );
@@ -144,4 +147,4 @@ const selectCls = css`
   width: 100%;
   height: 100%;
   z-index: 1000;
-`;
+`;

src/modules/editor/components/Viewport/Slider/SliderLeft/MySources.tsx

@@ -1,9 +1,10 @@
 import { useEditor } from "@/modules/editor";
-import { initResource, useResource } from "@/modules/resource";
+import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
-import { Image, List, Loadmore } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { Radio } from "ant-design-vue";
 import { defineComponent, reactive } from "vue";
+import { Container, Draggable } from "vue-dndrop";
 
 export const MySources = defineComponent({
   setup() {
@@ -54,21 +55,54 @@ export const MySources = defineComponent({
             <Radio.Button value="Image">图片</Radio.Button>
             <Radio.Button value="Video">视频</Radio.Button>
           </Radio.Group>
-          <div class="scrollbar flex-1 -mr-15px pr-15px">
-            <List data={control.state.list} columns={2} gap="20px">
+          <div class="flex-1 -mr-15px pr-15px overflow-x-hidden overflow-y-auto scrollbar">
+            <Container
+              class="grid grid-cols-2 gap-20px"
+              behaviour="copy"
+              group-name="canvas"
+              animation-duration={0}
+              get-child-payload={(index: number) => {
+                return {
+                  type: state.sourceType,
+                  data: control.state.list[index],
+                };
+              }}
+            >
+              {control.state.list.map((item: any) => (
+                <Draggable class="">
+                  <div
+                    class="draggable-item"
+                    style={{ aspectRatio: 1 }}
+                    onClick={() => clickToDesign(item.file.url)}
+                  >
+                    <Image
+                      class="w-full h-full"
+                      src={item.file.url}
+                      size={240}
+                    />
+                  </div>
+                </Draggable>
+              ))}
+
+              {/* <List
+              data={control.state.list}
+              columns={2}
+              gap="20px"
+              class="h-1/1 pr-15px scrollbar"
+            >
               {{
                 item(item: any) {
                   return (
-                    <div
-                      style={{ aspectRatio: 1 }}
-                      onClick={() => clickToDesign(item.file.url)}
-                    >
-                      <Image
-                        class="w-full h-full"
-                        src={item.file.url}
-                        size={240}
-                      />
-                    </div>
+                      <div
+                        style={{ aspectRatio: 1 }}
+                        onClick={() => clickToDesign(item.file.url)}
+                      >
+                        <Image
+                          class="w-full h-full"
+                          src={item.file.url}
+                          size={240}
+                        />
+                      </div>
                   );
                 },
                 loadmore() {
@@ -82,7 +116,14 @@ export const MySources = defineComponent({
                   );
                 },
               }}
-            </List>
+            </List> */}
+            </Container>
+            <Loadmore
+              class="mt-20px"
+              loading={control.state.loading}
+              canLoad={control.state.canLoadNext}
+              onChange={control.loadNextPage}
+            />
           </div>
         </div>
       );

src/modules/editor/controllers/DragAddCtrl/index.ts

@@ -1,8 +1,16 @@
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
 
+type sourceType = {
+  _id?: string;
+  file?: {
+    url?: string;
+  };
+};
+
 export class DragAddCtrl extends ModuleControl<EditorModule> {
   dragingCompKey = "";
+  dragingCompData: sourceType = {};
 
   _cancel?: () => void;
   _mouseUping = false;
@@ -18,10 +26,14 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
     }
   }
 
+  updateCompData(data: object) {
+    this.dragingCompData = data;
+  }
+
   initEvent() {
     const scope = this;
 
-    function mouseup(e: MouseEvent) {
+    async function mouseup(e: MouseEvent) {
       console.log("mouseup=>", scope.dragingCompKey);
       scope._mouseUping = true;
       setTimeout(() => {
@@ -31,7 +43,14 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
       if (scope._cancel) scope._cancel();
 
       if (!scope.dragingCompKey) return;
-      scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+      await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+      if (
+        scope.dragingCompData?._id &&
+        (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
+      ) {
+        scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
+        scope.dragingCompData = {};
+      }
       scope.dragingCompKey = "";
     }