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

src/hooks/initViewportSize.ts

@@ -8,7 +8,7 @@ export function initViewportSize() {
       meta.name = "viewport";
       document.head.appendChild(meta);
     }
-    meta.content = `width=375,initial-scale=${window.outerWidth / 375}`;
+    meta.content = `width=375,initial-scale=${window.outerWidth / 375},maximum-scale=${window.outerWidth / 375}`;
   }
   if (!isPc()) {
     window.addEventListener("resize", setScale);

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -7,7 +7,7 @@ import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
 import { Select } from "ant-design-vue";
 import { MusicOptions } from "./localMusic";
-const styleColumns = (muisc: string): ColumnItem[] => {
+const styleColumns = (muisc?: string): ColumnItem[] => {
   return [
     {
       label: "背景颜色",
@@ -19,15 +19,15 @@ const styleColumns = (muisc: string): ColumnItem[] => {
       dataIndex: "value.music",
       component: Select,
       props: {
-        class: "w-full",
-        defaultValue: muisc,
+        class: "w-full flex-1 overflow-hidden",
+        value: muisc,
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
     },
     {
       dataIndex: "value.music",
       component: PageMusic,
-      isVisible: (value, data) => data?.value?.music != "",
+      isVisible: (value, data) => data?.value?.music != "" && muisc != "",
     },
   ];
 };
@@ -42,13 +42,17 @@ export const PageForm = defineComponent({
     }
 
     return () => {
-      const music = helper.findRootComp()?.value.music || "";
+      const compMusic = helper.findRootComp()?.value.music || "";
+      const curValue = MusicOptions.find((e) => {
+        return e.value == compMusic;
+      });
+
       return (
         <>
           <div>页面样式</div>
           <FormUI
             data={props.component}
-            columns={styleColumns(music)}
+            columns={styleColumns(curValue?.value || "")}
             onChange={changeVal}
           />
         </>

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -1,9 +1,14 @@
 import { IconMusic } from "@/assets/icons";
 import { isWeixinBrowser } from "@/controllers/wxController";
 import { useEditor } from "@/modules/editor";
-import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons-vue";
+import {
+  PauseCircleOutlined,
+  PlayCircleOutlined,
+  SoundOutlined,
+} from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
-import { Button, Slider } from "ant-design-vue";
+
+import { Button, Dropdown, Slider } from "ant-design-vue";
 import { Howl } from "howler";
 import { nanoid } from "nanoid";
 import {
@@ -15,26 +20,37 @@ import {
   onMounted,
 } from "vue";
 import { bool, number } from "vue-types";
+import { MusicOptions } from "./localMusic";
 declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
   setup() {
-    const { store, helper, controls } = useEditor();
+    const { store, helper, controls, actions } = useEditor();
+    const rootComp = helper.findRootComp();
+    const volume =
+      rootComp?.value.volume != undefined ? rootComp?.value.volume : 0.3;
     const state = reactive({
       playStatus: false,
       duration: 0,
       currentTime: 0,
       muted: true,
+      volume: volume,
     });
-    const rootComp = helper.findRootComp();
+
     let audioKey = nanoid();
     let audioBgm = ref();
+
     const initAudioBgm = () => {
       audioBgm.value = null;
+      const curAudio = MusicOptions.find((e) => {
+        return e.value == rootComp?.value.music;
+      });
+      const src = curAudio?.src || "";
       audioBgm.value = new Howl({
-        src: [rootComp?.value.music],
+        src: [src],
         loop: store.isEditMode ? false : true,
         preload: true,
         HTML5: true,
+        volume: volume,
       });
       controls.mediaCtrl.setMediasInstance(audioKey, audioBgm.value);
       audioBgm.value.on("load", () => {
@@ -111,7 +127,6 @@ export const PageMusic = defineComponent({
         audioRest();
       }
       let playing = audioBgm.value.playing();
-      console.log(playing);
       if (status && playing) {
         state.playStatus = true;
         return;
@@ -137,6 +152,13 @@ export const PageMusic = defineComponent({
       state.currentTime = v;
       audioBgm.value && audioBgm.value.seek(v);
     };
+    const volumeChange = (v: number) => {
+      state.volume = v;
+      if (rootComp) {
+        actions.updateCompData(rootComp, "value.volume", v);
+      }
+      audioBgm.value && audioBgm.value.volume(v);
+    };
     const audioRest = () => {
       if (!audioBgm.value) {
         return;
@@ -157,8 +179,10 @@ export const PageMusic = defineComponent({
             <AudioPlayer
               key={music}
               playStatus={state.playStatus}
+              volume={state.volume}
               onStatus={playAudio}
               onSeekChange={seekChange}
+              onVolumeChange={volumeChange}
               duration={state.duration}
               currentTime={state.currentTime}
             />
@@ -180,11 +204,12 @@ export const PageMusic = defineComponent({
 
 const AudioPlayer = defineComponent({
   props: {
+    volume: number(),
     playStatus: bool(),
     currentTime: number(),
     duration: number(),
   },
-  emits: ["status", "seekChange"],
+  emits: ["status", "seekChange", "volumeChange"],
   setup(props, { emit }) {
     const audioControl = (playStatus: boolean) => {
       emit("status", playStatus);
@@ -192,6 +217,9 @@ const AudioPlayer = defineComponent({
     const seekChange = (v: any) => {
       emit("seekChange", v);
     };
+    const volumeChange = (v: any) => {
+      emit("volumeChange", v);
+    };
     const formatTime = (secs?: number) => {
       if (!secs) {
         return "00:00";
@@ -207,6 +235,23 @@ const AudioPlayer = defineComponent({
         String(seconds).padStart(2, "0")
       );
     };
+    const volumeSlider = () => {
+      return (
+        <div class={[VolumeSliderStyle]}>
+          <div class={"h-100px pb-8px"}>
+            <Slider
+              tooltipVisible={false}
+              min={0}
+              max={1}
+              step={0.1}
+              vertical={true}
+              value={props.volume}
+              onChange={volumeChange}
+            ></Slider>
+          </div>
+        </div>
+      );
+    };
     return () => {
       return (
         <div class={AudioPlayerStyle}>
@@ -236,11 +281,71 @@ const AudioPlayer = defineComponent({
           <div>
             {formatTime(props.currentTime)}/{formatTime(props.duration)}
           </div>
+          <div>
+            <Dropdown
+              disabled={!props.playStatus}
+              overlay={volumeSlider()}
+              trigger="click"
+              placement="top"
+            >
+              <Button
+                type="link"
+                icon={<SoundOutlined style={{ fontSize: "18px" }} />}
+              ></Button>
+            </Dropdown>
+          </div>
         </div>
       );
     };
   },
 });
+const VolumeSliderStyle = css`
+  margin-bottom: -4px;
+  padding: 8px 4px;
+  background-color: #303030;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
+  /* slider style */
+  .ant-slider-disabled {
+    opacity: 0.7;
+  }
+  .ant-slider-step {
+    background-color: rgba(255, 255, 255, 0.27);
+  }
+  .ant-slider-track {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .ant-slider:not(.ant-slider-disabled):hover {
+    .ant-slider-handle {
+      background-color: @inf-primary-color;
+      &:not(.ant-tooltip-open) {
+        border-color: #fff;
+      }
+    }
+  }
+  .ant-slider {
+    &.ant-slider-disabled {
+      .ant-slider-handle {
+        background-color: #bbb;
+        opacity: 0.8;
+      }
+    }
+  }
+  .ant-slider-handle {
+    width: 14px;
+    height: 8px;
+    border-radius: 2px;
+    border-color: #fff;
+    background-color: #fff;
+  }
+
+  .ant-slider-handle-click-focused {
+    border-color: #fff;
+    background-color: @inf-primary-color;
+  }
+`;
 const MusicEditStyle = css`
   flex: 1;
 `;

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

@@ -5,6 +5,7 @@ import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
 import { css } from "@linaria/core";
 import { PageMusic } from "./PageMusic";
+import { MusicOptions } from "./localMusic";
 
 export const Component = defineComponent({
   props: {
@@ -15,7 +16,10 @@ export const Component = defineComponent({
     const { helper } = editor;
     const { children, layout, value } = useCompData(props.compId);
     const compRef = useCompRef(props.compId);
-
+    const compMusic = value.music || "";
+    const curValue = MusicOptions.find((e) => {
+      return e.value == compMusic;
+    });
     return () => (
       <div
         ref={compRef}
@@ -29,7 +33,7 @@ export const Component = defineComponent({
               return slots.CompItem?.(comp);
             })
           )}
-          {value.music && !editor.store.isEditMode && <PageMusic />}
+          {curValue?.value && !editor.store.isEditMode && <PageMusic />}
         </div>
       </div>
     );

src/modules/editor/components/CompUI/basicUI/Page/localMusic.ts

@@ -1,50 +1,62 @@
 export const MusicOptions = [
   {
     label: "安静舒缓",
-    value: require("@/assets/audio/soothing&quiet.mp3"),
+    value: "soothing&quiet",
+    src: require("@/assets/audio/soothing&quiet.mp3"),
   },
   {
     label: "和煦的风",
-    value: require("@/assets/audio/balmy_wind.mp3"),
+    value: "balmy_wind",
+    src: require("@/assets/audio/balmy_wind.mp3"),
   },
   {
     label: "纽约落日",
-    value: require("@/assets/audio/sunset_in_newyork.mp3"),
+    value: "sunset_in_newyork",
+    src: require("@/assets/audio/sunset_in_newyork.mp3"),
   },
   {
     label: "温情回忆",
-    value: require("@/assets/audio/warm_memories.mp3"),
+    value: "warm_memories",
+    src: require("@/assets/audio/warm_memories.mp3"),
   },
   {
     label: "春华秋实",
-    value: require("@/assets/audio/spring&autumn.mp3"),
+    value: "spring&autumn",
+    src: require("@/assets/audio/spring&autumn.mp3"),
   },
   {
     label: "明媚阳光",
-    value: require("@/assets/audio/bright_sunshine.mp3"),
+    value: "bright_sunshine",
+    src: require("@/assets/audio/bright_sunshine.mp3"),
   },
   {
     label: "动感活力",
-    value: require("@/assets/audio/dynamic&energetic.mp3"),
+    value: "dynamic&energetic",
+    src: require("@/assets/audio/dynamic&energetic.mp3"),
   },
   {
     label: "冲上云霄",
-    value: require("@/assets/audio/soar_into_the_sky.mp3"),
+    value: "soar_into_the_sky",
+    src: require("@/assets/audio/soar_into_the_sky.mp3"),
   },
   {
     label: "命运希望",
-    value: require("@/assets/audio/destiny&hope.mp3"),
+    value: "destiny&hope",
+    src: require("@/assets/audio/destiny&hope.mp3"),
   },
   {
     label: "励志活力",
-    value: require("@/assets/audio/inspirational_vitality.mp3"),
+    value: "inspirational_vitality",
+    src: require("@/assets/audio/inspirational_vitality.mp3"),
   },
   {
     label: "励志希望",
-    value: require("@/assets/audio/inspirational_hope.mp3"),
+    value: "inspirational_hope",
+    src: require("@/assets/audio/inspirational_hope.mp3"),
   },
   {
     label: "活力鼓舞",
-    value: require("@/assets/audio/inspiration_vigour.mp3"),
+    value: "inspiration_vigour",
+    src: require("@/assets/audio/inspiration_vigour.mp3"),
   },
 ];

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -8,6 +8,7 @@ import { string, bool } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { TreeDataItem } from "ant-design-vue/lib/tree";
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -75,7 +76,7 @@ export const CompTree = defineComponent({
       ) {
         return;
       }
-      let parentComp = null;
+      let parentComp: any = null;
       if (dragLevel > dropLevel) {
         parentComp = helper.findComp(dropKey);
       } else {
@@ -87,12 +88,53 @@ export const CompTree = defineComponent({
       const index = currParentComp?.children.default?.indexOf(currComp.id);
       if (index != -1) {
         currParentComp?.children.default?.splice(index as number, 1);
+        helper.extendStreamCard(currParentComp?.id || "");
       }
       if (!info.dropToGap) {
         parentComp?.children.default == parentComp?.children.default || [];
         parentComp?.children.default?.unshift(currComp?.id);
+        sortCompInCard(parentComp, currComp.id);
       } else {
         parentComp?.children.default?.splice(info.dropPosition, 0, currComp.id);
+        sortCompInCard(parentComp, currComp.id);
+      }
+    };
+    const sortCompInCard = (parentComp: DesignComp, currCompId: string) => {
+      if (parentComp?.compKey != "Container") {
+        return;
+      }
+      const children = parentComp.children.default || [];
+      if (children?.length > 0) {
+        actions.pickComp("");
+        for (let i = 0; i < children?.length; i++) {
+          const prveCompId = children[i - 1];
+          const nowCompId = children[i];
+          const nowComp = helper.findComp(nowCompId);
+          if (!prveCompId) {
+            const nowCompBound = helper.getCardCompBound(nowCompId);
+            if (!nowComp) {
+              continue;
+            }
+            const nowObj = new CompObject(nowComp);
+            nowObj.worldTransform.translate(-nowCompBound.x, -nowCompBound.y);
+            nowComp.layout.transformMatrix =
+              nowObj.worldTransform.getMatrixStr();
+            continue;
+          }
+          const prevCompBound = helper.getCardCompBound(prveCompId);
+          const prevComp = helper.findComp(prveCompId);
+          if (!prevComp || !nowComp) {
+            continue;
+          }
+          const obj = new CompObject(prevComp);
+          const yOffset = prevCompBound.h;
+          obj.worldTransform.translate(0, yOffset);
+          nowComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+        }
+        nextTick(() => {
+          actions.pickComp(currCompId);
+          helper.extendStreamCard(parentComp.id);
+        });
       }
     };
 

src/modules/editor/controllers/SelectCtrl/matrix.ts

@@ -40,14 +40,14 @@ export class Matrix {
     return out;
   }
 
-  setMatrixStr(transformMatrix:string) {
+  setMatrixStr(transformMatrix: string) {
     const values = transformMatrix.split("(")[1].split(")")[0].split(",");
     this.a = +values[0];
     this.b = +values[1];
     this.c = +values[2];
     this.d = +values[3];
 
-    this.tx = +values[4]; 
+    this.tx = +values[4];
     this.ty = +values[5];
   }
 
@@ -70,7 +70,7 @@ export class Matrix {
   getMatrixStr() {
     return `matrix(${this.a},${this.b},${this.c},${this.d},${this.tx},${this.ty})`;
   }
-  
+
   fromArray(array: number[]) {
     this.a = array[0];
     this.b = array[1];
@@ -156,7 +156,6 @@ export class Matrix {
   translate(x: number, y: number) {
     this.tx += x;
     this.ty += y;
-
     return this;
   }
   scale(x: number, y: number) {
@@ -171,12 +170,15 @@ export class Matrix {
   }
 
   getScale() {
-    const a = this.a, b = this.b, c = this.c, d = this.d;
-    const x = Math.sqrt((a * a) + (b * b));
-    const y = Math.sqrt((c * c) + (d * d));
-    return {x, y};
+    const a = this.a,
+      b = this.b,
+      c = this.c,
+      d = this.d;
+    const x = Math.sqrt(a * a + b * b);
+    const y = Math.sqrt(c * c + d * d);
+    return { x, y };
   }
-  
+
   rotate(angle: number) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
@@ -199,7 +201,6 @@ export class Matrix {
     const a = this.a;
     return Math.atan2(b, a);
   }
-  
 
   append(matrix: Matrix) {
     const a1 = this.a;
@@ -259,43 +260,39 @@ export class Matrix {
     return this;
   }
 
-  decompose(transform:any)
-  {
-      // sort out rotation / skew..
-      const a = this.a;
-      const b = this.b;
-      const c = this.c;
-      const d = this.d;
+  decompose(transform: any) {
+    // sort out rotation / skew..
+    const a = this.a;
+    const b = this.b;
+    const c = this.c;
+    const d = this.d;
+
+    const skewX = -Math.atan2(-c, d);
+    const skewY = Math.atan2(b, a);
 
-      const skewX = -Math.atan2(-c, d);
-      const skewY = Math.atan2(b, a);
+    const delta = Math.abs(skewX + skewY);
 
-      const delta = Math.abs(skewX + skewY);
+    transform.rotation = skewY;
+    transform.skew.x = transform.skew.y = 0;
 
+    if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) {
       transform.rotation = skewY;
       transform.skew.x = transform.skew.y = 0;
+    } else {
+      transform.rotation = 0;
+      transform.skew.x = skewX;
+      transform.skew.y = skewY;
+    }
+
+    // next set scale
+    transform.scale.x = Math.sqrt(a * a + b * b);
+    transform.scale.y = Math.sqrt(c * c + d * d);
+
+    // next set position
+    transform.position.x = this.tx;
+    transform.position.y = this.ty;
 
-      if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001)
-      {
-          transform.rotation = skewY;
-          transform.skew.x = transform.skew.y = 0;
-      }
-      else
-      {
-          transform.rotation = 0;
-          transform.skew.x = skewX;
-          transform.skew.y = skewY;
-      }
-
-      // next set scale
-      transform.scale.x = Math.sqrt((a * a) + (b * b));
-      transform.scale.y = Math.sqrt((c * c) + (d * d));
-
-      // next set position
-      transform.position.x = this.tx;
-      transform.position.y = this.ty;
-
-      return transform;
+    return transform;
   }
 
   invert() {

src/modules/editor/module/actions/edit.ts

@@ -7,23 +7,23 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
-
   pickComp(compId: string, selected = true) {
-    if (compId == "") {//空的时候,就选择根页面
+    if (compId == "") {
+      //空的时候,就选择根页面
       compId = "root";
     }
-    const selectCardChild = (id:string)=>{
-      const paths = this.helper.getCompTrees(id)
-        const cardChilds = paths[2];
-        if (cardChilds) {
-            this.actions.selectObjs([cardChilds.id])
-        } else  {
-          this.actions.selectObjs([])
-          if (id != "root") {
-             this.store.setCurrComp(this.store.currStreamCardId);
-          }
+    const selectCardChild = (id: string) => {
+      const paths = this.helper.getCompTrees(id);
+      const cardChilds = paths[2];
+      if (cardChilds) {
+        this.actions.selectObjs([cardChilds.id]);
+      } else {
+        this.actions.selectObjs([]);
+        if (id != "root") {
+          this.store.setCurrComp(this.store.currStreamCardId);
         }
-    }
+      }
+    };
 
     if (this.store.currCompId == compId) {
       return;
@@ -34,14 +34,13 @@ export const editActions = EditorModule.action({
     }
   },
 
-  
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
     if (!this.store.currStreamCardId) {
-      queenApi.messageError("请先选中一个卡片")
+      queenApi.messageError("请先选中一个卡片");
       return;
     }
-    
+
     //点击默认都创建一个容器
     //创建容器
     const isCreatCard =
@@ -61,30 +60,41 @@ export const editActions = EditorModule.action({
     }
 
     let currCard = this.store.currStreamCard;
- 
+
     if (isCreatCard) {
       //先创建卡片
-      const currCardIndex = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-      const compId = await this.store.insertDesignContent("Container", currCardIndex);
+      const currCardIndex =
+        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+      const compId = await this.store.insertDesignContent(
+        "Container",
+        currCardIndex
+      );
       currCard = this.helper.findComp(compId) as DesignComp;
-    } 
+    }
 
     const compId = await this.store.insertCompContainer(compKey, currCard);
     const addedComp = this.store.compMap[compId];
     addedComp.layout.position = "absolute";
 
-    const currComp  = this.helper.findComp(compId) as DesignComp;
+    const currComp = this.helper.findComp(compId) as DesignComp;
     cb?.(currComp);
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
       375 - (currComp.layout.size?.[0] || 750) / 2
     );
-    const obj = new CompObject(currComp)
+    const obj = new CompObject(currComp);
+    //没有选中组件添加到当前卡片最后
+    const children = currCard.children.default || [];
+    if (yOffset == 0 && children.length >= 2) {
+      const prevCompIndex = children.indexOf(compId) - 1;
+      const bound = this.helper.getCardCompBound(children[prevCompIndex]);
+      yOffset = bound.y + bound.h;
+    }
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
-  
-    this.actions.pickComp(compId)
+
+    this.actions.pickComp(compId);
     this.helper.extendStreamCard(currCard.id);
 
     if (compKey == "Text") {
@@ -116,11 +126,11 @@ export const editActions = EditorModule.action({
     }
     this.controls.cropCtrl.close();
   },
-  
-   async selectObjs(ids: string[]) {
-     this.store.selected = ids;
-     this.store.selectId = ids.length > 1 ? (Date.now() + "") : ""
-   },
+
+  async selectObjs(ids: string[]) {
+    this.store.selected = ids;
+    this.store.selectId = ids.length > 1 ? Date.now() + "" : "";
+  },
 
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
@@ -195,7 +205,7 @@ export const editActions = EditorModule.action({
     const selected = this.store.selected.slice(0);
     this.actions.selectObjs([]);
     let n = selected.length;
-    while( n--) {
+    while (n--) {
       this.actions.removeComp(selected[n]);
     }
   },
@@ -416,12 +426,13 @@ export const editActions = EditorModule.action({
 
   handleSelectMoving(key:string) {
     if (this.store.selected.length < 1) return;
-    let x = 0, y = 0;
-    switch(key) {
+    let x = 0,
+      y = 0;
+    switch (key) {
       case "left":
         x = -1;
         break;
-      case "right": 
+      case "right":
         x = 1;
         break;
       case "up":
@@ -431,7 +442,7 @@ export const editActions = EditorModule.action({
         y = 1;
         break;
     }
-    this.controls.selectCtrl.translate(x*0.5, y*0.5);
+    this.controls.selectCtrl.translate(x * 0.5, y * 0.5);
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
-  }
+  },
 });