Home Explore Help
Register Sign In
lianghj
/
queenshow
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

bianjiang 1 year ago
parent
59dd1518bc 398fb6ba1f
commit
dde5027fdc
13 changed files with 366 additions and 40 deletions
Split View Show Diff Stats
  1. 9 0
      public/index.html
  2. 1 1
      src/controllers/wxController.ts
  3. 1 1
      src/modules/editor/components/CompUI/basicUI/Image2/component.tsx
  4. 1 0
      src/modules/editor/components/CompUI/basicUI/Video/component.tsx
  5. 7 0
      src/modules/editor/components/CompUI/basicUI/Video/index.ts
  6. 1 1
      src/modules/editor/components/CompUI/basicUI/View.tsx
  7. 57 0
      src/modules/editor/components/PreviewModal/index.tsx
  8. 30 22
      src/modules/editor/controllers/SelectCtrl/assistCtrl.ts
  9. 198 0
      src/modules/editor/controllers/SelectCtrl/assistMagnetCtrl.ts
  10. 6 6
      src/modules/editor/controllers/SelectCtrl/assistRulerCtrl.ts
  11. 28 5
      src/modules/editor/controllers/SelectCtrl/index.ts
  12. 11 0
      src/modules/editor/module/actions/image.tsx
  13. 16 4
      src/modules/editor/module/stores/index.ts

+ 9 - 0
public/index.html
View File 

@@ -14,6 +14,15 @@
 
         );
 
       }
 
     </script>
 
+    <script>
 
+      var _hmt = _hmt || [];
 
+      (function() {
 
+        var hm = document.createElement("script");
 
+        hm.src = "https://hm.baidu.com/hm.js?ae98cd324b20861abe54a4aae84c1c69";
 
+        var s = document.getElementsByTagName("script")[0]; 
+        s.parentNode.insertBefore(hm, s);
 
+      })();
 
+    </script>
 
   </head>
 
 
   <body>

+ 1 - 1
src/controllers/wxController.ts
View File 

@@ -4,7 +4,7 @@ declare const wx: any;
 
 
 const ua = navigator.userAgent.toLowerCase();
 
 
-function isWeixinBrowser() {
 
+export function isWeixinBrowser() {
 
   return /micromessenger/.test(ua) ? true : false;
 
 }

+ 1 - 1
src/modules/editor/components/CompUI/basicUI/Image2/component.tsx
View File 

@@ -67,7 +67,7 @@ export const Component = defineComponent({
 
             if (value.showLink && value.link && !store.isEditMode) {
 
               window.location.href = value.link;
 
             } else {
 
-              controls.wxCtrl.setPreviewData(value.url, store.previewImageList);
 
+              actions.previewImage(value.url, store.previewImageList);
 
             }
 
           }}
 
         >

+ 1 - 0
src/modules/editor/components/CompUI/basicUI/Video/component.tsx
View File 

@@ -41,6 +41,7 @@ export const Component = defineComponent({
 
       if (value.autoplay) options.autoplay = true;
 
       if (value.loop) options.loop = true;
 
       if (value.controls) options.controls = true;
 
+      if (value.poster) options.poster = value.poster;
 
 
       return (
 
         <View class={rootCls} compId={props.compId}>

+ 7 - 0
src/modules/editor/components/CompUI/basicUI/Video/index.ts
View File 

@@ -1,5 +1,6 @@
 
 import { createAttrsForm } from "../../defines/createAttrsForm";
 
 import { createCompHooks } from "../../defines/createCompHooks";
 
+import { ImagePicker } from "../../formItems/ImagePicker";
 
 
 export { Component } from "./component";
 
 
@@ -15,6 +16,7 @@ export const { createComp, useCompData } = createCompHooks({
 
     autoplay: true,
 
     loop: true,
 
     controls: true,
 
+    poster: "",
 
   },
 
   layout: {
 
     size: [750, 750],
 
@@ -27,6 +29,11 @@ export const Form = createAttrsForm([
 
   //   dataIndex: "value.url",
 
   //   component: "Input",
 
   // },
 
+  {
 
+    label: "封面",
 
+    dataIndex: "value.poster",
 
+    component: ImagePicker,
 
+  },
 
   {
 
     label: "视频比例",
 
     dataIndex: "value.ratio",

+ 1 - 1
src/modules/editor/components/CompUI/basicUI/View.tsx
View File 

@@ -30,7 +30,7 @@ export const View = defineComponent({
 
           ref={compRef}
 
           class={[
 
             viewStyle,
 
-            store.isEditMode && editCompStyle,
 
+            store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
 
             isGroupComp && groupCompCls,
 
             store.currStreamCardId == props.compId && CurrCompStyle,
 
           ]}

+ 57 - 0
src/modules/editor/components/PreviewModal/index.tsx
View File 

@@ -0,0 +1,57 @@
 
+import { Image, Swiper } from "@queenjs/ui";
 
+import { defineComponent, reactive, ref } from "vue";
 
+import { array, string } from "vue-types";
 
+
 
+export default defineComponent({
 
+  props: {
 
+    data: array<string>().isRequired,
 
+    current: string().isRequired,
 
+  },
 
+  setup(props) {
 
+    const carouselRef = ref();
 
+
 
+    const index = props.data.findIndex((d) => d == props.current);
 
+
 
+    const state = reactive({
 
+      index: index,
 
+    });
 
+
 
+    return () => {
 
+      const { data } = props;
 
+      return (
 
+        <div class="relative">
 
+          <div class="absolute w-1/1 top-15px let-0 text-center z-9 text-shadow">
 
+            {state.index + 1}/{data.length}
 
+          </div>
 
+          <Swiper
 
+            onInit={(e) => (carouselRef.value = e)}
 
+            options={{
 
+              slidesPerView: 1,
 
+              initialSlide: state.index,
 
+              on: {
 
+                slideChange: (e: any) => {
 
+                  state.index = e.realIndex;
 
+                },
 
+              },
 
+            }}
 
+          >
 
+            {data?.map((item, index) => (
 
+              <Swiper.Slider
 
+                key={index}
 
+                class="!h-100vh flex felx-col items-center justify-center"
 
+              >
 
+                <div class="flex-1 max-h-1/1 overflow-y-auto">
 
+                  <Image
 
+                    src={item}
 
+                    class="w-1/1 !object-contain bg-light-50"
 
+                    size={800}
 
+                  />
 
+                </div>
 
+              </Swiper.Slider>
 
+            ))}
 
+          </Swiper>
 
+        </div>
 
+      );
 
+    };
 
+  },
 
+});

+ 30 - 22
src/modules/editor/controllers/SelectCtrl/assistCtrl.ts
View File 

@@ -37,6 +37,7 @@ export class AssistCtrl {
 
         const size = this.ctrl._selCanvaseSize;
 
         const ctx = this.ctrl._selCtx;
 
         const cardBox = this.ctrl.getCurrCardBox();
 
+        const veiewBox = this.ctrl.getViewPortBox();
 
 
         const ObjC = this.ctrl.objContainer 
         const bound = ObjC.getBound()
 
@@ -47,50 +48,54 @@ export class AssistCtrl {
 
         ctx.fillStyle = "orange"; 
 
         //左边
 
+    
+
 
         let x = (cardBox.x + bound.x)*2;
 
         let y = (cardBox.y + bound.y + bound.height / 2.0) *2
 
-        ctx.moveTo(x, y); // Move the pen to (30, 50)
 
-        ctx.lineTo(cardBox.x *2 , y); // Draw a line to (150, 100)
 
-        ctx.stroke(); // Render the path
 
-        //关闭当前的绘制路径
 
-	    ctx.closePath();
 
         const tl = ( x - cardBox.x*2).toFixed(0);
 
-        ctx.fillText(tl, cardBox.x*2, y - 18);
 
+        const m = ctx.measureText(tl)
 
+        ctx.moveTo(veiewBox.left *2, y); 
+        ctx.lineTo(veiewBox.left *2 + 30, y);
 
+        ctx.stroke();
 
+	    ctx.closePath();
 
+        ctx.fillText(tl, veiewBox.left *2, y - 18);
 
 
         //右边
 
         x = (cardBox.x + bound.x + bound.width);
 
         const x2 = (cardBox.x + cardBox.width);
 
-        ctx.moveTo(x*2, y); // Move the pen to (30, 50)
 
-        ctx.lineTo( x2*2, y); // Draw a line to (150, 100)
 
-        ctx.stroke(); // Render the path
 
-        ctx.closePath();
 
         const tr = ((x2-x)*2).toFixed(0);
 
-        const m = ctx.measureText(tr)
 
-        ctx.fillText(tr, x2*2 - m.width, y-18);
 
+        const m2 = ctx.measureText(tr)
 
+
 
+        ctx.beginPath(); // Start a new path
 
+        ctx.moveTo(veiewBox.right*2.0, y); 
+        ctx.lineTo( veiewBox.right*2.0 - 30, y); 
+        ctx.stroke();
 
+        ctx.closePath();
 
+        ctx.fillText(tr, veiewBox.right*2.0 - m2.width, y-18);
 
 
         //上边
 
         x = cardBox.x + cardBox.width / 2.0;
 
         y = cardBox.y;
 
 
-        ctx.moveTo(x*2, y*2); // Move the pen to (30, 50)
 
-        ctx.lineTo( x*2, (y + bound.y)*2); // Draw a line to (150, 100)
 
+        ctx.beginPath(); // Start a new path
 
+        ctx.moveTo(x*2, veiewBox.top*2); // Move the pen to (30, 50)
 
+        ctx.lineTo( x*2, veiewBox.top*2 + 40 ); // Draw a line to (150, 100)
 
         ctx.stroke(); // Render the path
 
-        ctx.closePath();
 
         let dy = (bound.y*2).toFixed(0);
 
-        ctx.fillText(dy, x*2, cardBox.y *2 + 36);
 
+        ctx.fillText(dy, x*2 + 10, veiewBox.top*2 +36);
 
 
 
         //下边
 
         x = cardBox.x + cardBox.width / 2.0;
 
         y = cardBox.y + cardBox.height;
 
 
-        ctx.moveTo(x*2, y*2); // Move the pen to (30, 50)
 
-        ctx.lineTo( x*2, (cardBox.y + bound.y + bound.height)*2); // Draw a line to (150, 100)
 
+        ctx.beginPath(); // Start a new path
 
+        ctx.moveTo(x*2, veiewBox.bottom*2.0); // Move the pen to (30, 50)
 
+        ctx.lineTo( x*2, veiewBox.bottom*2.0 - 40); // Draw a line to (150, 100)
 
         ctx.stroke(); // Render the path
 
-        ctx.closePath();
 
         dy = ((cardBox.height - bound.y - bound.height)*2).toFixed(0);
 
-        ctx.fillText(dy, x*2, y*2);
 
-
 
+        ctx.fillText(dy, x*2 + 10, veiewBox.bottom*2.0);
 
+        
         //如果有旋转角度
 
         if ( Math.abs(ObjC.parent.rotation) > 0.001 ) {
 
             ctx.strokeRect((bound.x + cardBox.x)*2, (bound.y + cardBox.y)*2, bound.width *2, bound.height *2);
 
@@ -104,6 +109,9 @@ export class AssistCtrl {
 
     }
 
 
     flashDrawCardDists() {
 
-        this._flashDraw(this.drawCardDists.bind(this));
 
+        this._flashDraw(()=>{
 
+            this.drawCardDists()
 
+            this.ctrl.assistMagnet?.draw();
 
+        });
 
     }
 
 }

+ 198 - 0
src/modules/editor/controllers/SelectCtrl/assistMagnetCtrl.ts
View File 

@@ -0,0 +1,198 @@
 
+import { SelectCtrl } from ".";
 
+import { ObjsContainer } from "./ObjsContainer";
 
+import { CompObject } from "./compObj";
 
+
 
+
 
+/**
 
+ * 吸附功能实现
 
+ */
 
+export class AssistMagnetCtrl { 
+    ctrl: SelectCtrl
 
+
 
+    constructor(ctrl: SelectCtrl) {
 
+        this.ctrl = ctrl;
 
+    }
 
+
 
+    rulerYs:number[]= [];
 
+    rulerXs:number[]= [];
 
+
 
+    clientX = 0;
 
+    clientY = 0;
 
+    currRefYs:number[] = [];
 
+    currRefXs:number[] = []
 
+    otherSlides : CompObject[] = [];
 
+
 
+    getMinValues(srcYs:number[], refYs: number[]) {
 
+        //找出最近的参考线
 
+        let n = srcYs.length;
 
+        let out :{min: number, v:number, o:number}[] = [];
 
+        while(n--) {
 
+            const srcY = srcYs[n];
 
+            let k = refYs.length;
 
+            let currMinY = 10000;
 
+            let currMinRefY = -10000;
 
+            let lastOffset = 0;
 
+            for (let i=0; i<k; i++) {
 
+                 const o = srcY - refYs[i]
 
+                if (Math.abs(o) <= currMinY) {
 
+                    currMinY = Math.abs(o);
 
+                    currMinRefY = refYs[i]
 
+                    lastOffset = o;
 
+                    continue;
 
+                } 
+                break
 
+            }
 
+            out.push({min: currMinY, v: currMinRefY, o: lastOffset})
 
+        }
 
+        out = out.sort((a, b)=>(a.min-b.min))
 
+
 
+        let min = out[0].min;
 
+        const sames = [out[0].v];
 
+        let m = out.length;
 
+        for(let i=1; i<m; i++) {
 
+            if (Math.abs(out[i].min- min) < 1) {
 
+                sames.push(out[i].v);
 
+            } else {
 
+                break;
 
+            }
 
+        }
 
+        return {offset: out[0].o, min: min,  values: sames};
 
+    }
 
+
 
+    test(e:MouseEvent) {
 
+
 
+        this.clientX = e.clientX;
 
+        this.clientY = e.clientY;
 
+    
+        const eps = 6;
 
+        const Objc = this.ctrl.objContainer as ObjsContainer
 
+        const bund = Objc.getBound();
 
+        const box = this.ctrl.getCurrCardBox();
 
+
 
+        //包围盒的上 中 下 三条横线
 
+        const srcY1 = (bund.y + box.top)*2.0
 
+        const srcYs = [srcY1,  srcY1 + bund.height, srcY1 + bund.height*2];
 
+        if (this.rulerYs.length < 1) {
 
+            this.rulerYs.push(box.top *2.0) //card上边线
 
+            this.rulerYs.push(box.top *2.0 + box.height )//中线
 
+            this.rulerYs.push((box.top  + box.height) * 2.0) //下边线
 
+
 
+            //所有参考线
 
+            const rulers = this.ctrl.assistRuler?.rulers || [];
 
+            let n = rulers.length;
 
+            while(n--) {
 
+                if (rulers[n].horz != undefined) 
+                this.rulerYs.push(box.top *2 + (rulers[n].horz as number));
 
+            }
 
+            //添加card内的其他对象
 
+            this.otherSlides = this.ctrl.getUnSelectChilds();
 
+
 
+            this.otherSlides.forEach(item=>{
 
+                const b = item.getBox();
 
+                const y = (b.y + box.top) *2.0
 
+                if (this.rulerYs.indexOf(y) == -1) {
 
+                    this.rulerYs.push(y)
 
+                }
 
+                const y1 = y + b.h
 
+                if (this.rulerYs.indexOf(y1) == -1) {
 
+                    this.rulerYs.push(y1)
 
+                }
 
+                const y2 = y + b.h *2
 
+                if (this.rulerYs.indexOf(y2) == -1) {
 
+                    this.rulerYs.push(y2)
 
+                }
 
+            })
 
+            this.rulerYs = this.rulerYs.sort((a,b)=>a-b)
 
+
 
+
 
+        }
 
+        this.currRefYs = [];
 
+        const {offset, min, values} = this.getMinValues(srcYs, this.rulerYs)
 
+        if (min < eps) {//找到了最近点，进行磁铁吸附
 
+            this.clientY = e.clientY - offset / 2.0;
 
+            this.currRefYs = values;
 
+        }
 
+
 
+        //包围盒的左 中 右三条横线
 
+        const srcX1 = (bund.x + box.left)*2.0
 
+        const srcXs = [srcX1,  srcX1 + bund.width, srcX1 + bund.width*2];
 
+        if (this.rulerXs.length < 1) {
 
+            this.rulerXs.push(box.left *2.0) //card上边线
 
+            this.rulerXs.push(box.left *2.0 + box.width )//中线
 
+            this.rulerXs.push((box.left  + box.width) * 2.0) //下边线
 
+
 
+            //所有参考线
 
+            const rulers = this.ctrl.assistRuler?.rulers || [];
 
+            let n = rulers.length;
 
+            while(n--) {
 
+                if (rulers[n].verz != undefined) 
+                this.rulerXs.push(box.left *2 + (rulers[n].verz as number));
 
+            }
 
+
 
+            //添加card内的其他对象
 
+            this.otherSlides.forEach(item=>{
 
+                const b = item.getBox();
 
+                const x = (b.x + box.left) *2.0
 
+                if (this.rulerXs.indexOf(x) == -1) {
 
+                    this.rulerXs.push(x)
 
+                }
 
+                const x1 = x + b.w
 
+                if (this.rulerXs.indexOf(x1) == -1) {
 
+                    this.rulerXs.push(x1)
 
+                }
 
+                const x2  = x + b.w *2
 
+                if (this.rulerXs.indexOf(x2) == -1) {
 
+                    this.rulerXs.push(x2)
 
+                }
 
+            })
 
+            this.rulerXs = this.rulerXs.sort((a,b)=>a-b)
 
+        }
 
+
 
+        this.currRefXs = [];
 
+        const ret = this.getMinValues(srcXs, this.rulerXs)
 
+        if (ret.min < eps) {//找到了最近点，进行磁铁吸附
 
+            this.clientX = e.clientX - ret.offset / 2.0;
 
+            this.currRefXs = ret.values;
 
+        }
 
+    }
 
+
 
+    onMouseUp() {
 
+        this.rulerYs = [];
 
+        this.rulerXs = [];
 
+        this.currRefXs = [];
 
+        this.currRefYs = [];
 
+    }
 
+
 
+    draw() {
 
+        if ( !(this.currRefXs.length > 0 || this.currRefYs.length > 0) ) {
 
+            return;
 
+        }
 
+
 
+        const ctx = this.ctrl._selCtx;
 
+        let n = this.currRefXs.length;
 
+        ctx.lineWidth = 2;
 
+        ctx.strokeStyle = "orange"; 
+        // 清除虚线样式
 
+        // ctx.setLineDash([]);
 
+
 
+        while(n--) {
 
+            let x = this.currRefXs[n]
 
+            ctx.beginPath();
 
+            ctx.moveTo(x, 0)
 
+            ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
 
+            ctx.stroke();
 
+            ctx.closePath();
 
+        }
 
+
 
+        const box = this.ctrl.getViewPortBox();
 
+        n = this.currRefYs.length;
 
+        while(n--) {
 
+            let y = this.currRefYs[n]
 
+            ctx.beginPath();
 
+            ctx.moveTo(box.left*2, y)
 
+            ctx.lineTo(box.right*2, y);
 
+            ctx.stroke();
 
+            ctx.closePath();
 
+        }
 
+    }
 
+}

+ 6 - 6
src/modules/editor/controllers/SelectCtrl/assistRulerCtrl.ts
View File 

@@ -11,10 +11,10 @@ export class AssistRulerCtrl {
 
 
     constructor(ctrl: SelectCtrl) {
 
         this.ctrl = ctrl;
 
-        const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
 
-        if (c) {
 
-            this.rulers = JSON.parse(c);
 
-        }
 
+        // const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
 
+        // if (c) {
 
+        //     this.rulers = JSON.parse(c);
 
+        // }
 
         this.draw();
 
     }
 
 
@@ -150,8 +150,8 @@ export class AssistRulerCtrl {
 
 
         console.log("rulerLineMouseUp=>", e.clientY);
 
         this._currAddingRuler = undefined;
 
-
 
-        localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
 
+        
+        //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
 
     }
 
     
     draw() {

+ 28 - 5
src/modules/editor/controllers/SelectCtrl/index.ts
View File 

@@ -10,6 +10,7 @@ import { Point } from "./objects/point";
 
 import { indexOf } from "lodash";
 
 import { AssistCtrl } from "./assistCtrl";
 
 import { AssistRulerCtrl } from "./assistRulerCtrl";
 
+import { AssistMagnetCtrl } from "./assistMagnetCtrl";
 
 
 /**
 
  *  页面画布空间进行选择
 
@@ -55,7 +56,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
 
   _downed = false;
 
   _selCtx = {} as CanvasRenderingContext2D;
 
-  _state = MODE_SEL_RECT;
 
+  _state = MODE_NONE;
 
 
   _selDownX = 0;
 
   _selDownY = 0;
 
@@ -69,18 +70,36 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
 
   assistCtrl?: AssistCtrl;
 
   assistRuler?: AssistRulerCtrl;
 
+  assistMagnet?: AssistMagnetCtrl;
 
 
   getCurrCardBox() {
 
     return this.store.currStreamCard.$el.getBoundingClientRect();
 
   } 
+  getViewPortBox() {
 
+    //@ts-ignore
 
+    return this.viewport.getBoundingClientRect();
 
+  } 
   
   getCurrCard() {
 
     return this.store.currStreamCard;
 
   }
 
+
 
   getProjectId() {
 
     return this.store.designData._id;
 
   }
 
 
+  getUnSelectChilds() {
 
+    const childs = this.store.currStreamCard.children.default || [];
 
+    let n = childs.length;
 
+    let out = [];
 
+    while(n--) {
 
+      if (this.store.selected.indexOf(childs[n]) == -1) {
 
+        out.push(new CompObject( this.store.compMap[childs[n]]));
 
+      }
 
+    }
 
+    return out;
 
+  }
 
+  
   initEvents(
 
     pageEl: HTMLElement,
 
     selCanvas: HTMLCanvasElement,
 
@@ -100,6 +119,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
 
     this.assistCtrl = new AssistCtrl(this);
 
     this.assistRuler = new AssistRulerCtrl(this);
 
+    this.assistMagnet = new AssistMagnetCtrl(this);
 
 
     viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
 
     window.addEventListener("resize", this.onResize.bind(this));
 
@@ -376,15 +396,18 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
 
   movingMousemove(e: MouseEvent) {
 
     const objContainer = this.objContainer as ObjsContainer;
 
+    const magnet = this.assistMagnet as AssistMagnetCtrl;
 
 
     if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
 
       const obj = this.objContainer as ObjsContainer;
 
       this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
 
     }
 
+    magnet.test(e);
 
+
 
     objContainer.setPivot(0);
 
     objContainer.translate(
 
-      e.clientX - this._movePreClientX,
 
-      e.clientY - this._movePreClientY
 
+      magnet.clientX - this._movePreClientX,
 
+      magnet.clientY - this._movePreClientY
 
     );
 
 
     this.upgateGizmoStyle();
 
@@ -485,6 +508,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.upgateGizmoStyle();
 
     this.helper.extendStreamCard(this.store.currStreamCardId);
 
     this.assistRuler?.draw();
 
+    this.assistMagnet?.onMouseUp();
 
   }
 
 
   moveMouseUp(e: MouseEvent, clicked: boolean) {
 
@@ -551,13 +575,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
 
   upgateGizmoStyle() {
 
     this.transferStyle.mode = this._state;
 
-    this.assistCtrl?.flashDrawCardDists();
 
-
 
     if (this.selected.length < 1) {
 
       this.transferStyle.showGizmo = false;
 
       return;
 
     }
 
 
+    this.assistCtrl?.flashDrawCardDists();
 
     this.transferStyle.showGizmo = false;
 
 
     //@ts-ignore

+ 11 - 0
src/modules/editor/module/actions/image.ts → src/modules/editor/module/actions/image.tsx
View File 

@@ -1,4 +1,6 @@
 
+import { isWeixinBrowser } from "@/controllers/wxController";
 
 import { EditorModule } from "..";
 
+import PreviewModal from "../../components/PreviewModal";
 
 
 export const ImgCompActions = EditorModule.action({
 
   handleImageHotKey(key: string) {
 
@@ -31,4 +33,13 @@ export const ImgCompActions = EditorModule.action({
 
       return;
 
     }
 
   },
 
+  previewImage(url, previewImageList) {
 
+    if (isWeixinBrowser()) {
 
+      this.controls.wxCtrl.setPreviewData(url, previewImageList);
 
+    } else {
 
+      this.showModal(<PreviewModal data={previewImageList} current={url} />, {
 
+        fullscreen: true,
 
+      });
 
+    }
 
+  },
 
 });

+ 16 - 4
src/modules/editor/module/stores/index.ts
View File 

@@ -49,11 +49,23 @@ export const store = EditorModule.store({
 
     },
 
     previewImageList(state) {
 
       const res: string[] = [];
 
-      Object.values(state.designData.compMap)
 
-        .filter((d) => d.compKey == "Image")
 
-        .forEach((value) => {
 
-          res.push(value.value?.url);
 
+
 
+      function findImg(comp: DesignComp) {
 
+        (comp?.children?.default
 
+          ? comp?.children?.default
 
+          : Object.values(comp?.children)
 
+        ).forEach((k: string) => {
 
+          const comp = state.designData.compMap[k];
 
+          if (comp.compKey == "Image") {
 
+            res.push(comp.value?.url);
 
+          } else {
 
+            findImg(comp);
 
+          }
 
         });
 
+      }
 
+
 
+      const root = state.designData.compMap["root"];
 
+      findImg(root);
 
       return res;
 
     },
 
   },