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

src/controllers/wxController.ts

@@ -34,7 +34,11 @@ export class wxController {
     timestamp: 0, // 必填，生成签名的时间戳
     nonceStr: "", // 必填，生成签名的随机串
     signature: "", // 必填，签名
-    jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
+    jsApiList: [
+      "updateAppMessageShareData",
+      "updateTimelineShareData",
+      "previewImage",
+    ], // 必填，需要使用的JS接口列表
   };
 
   //默认分享设置
@@ -45,10 +49,12 @@ export class wxController {
     desc: "",
   };
 
-  init(url: string) {
+  constructor(options: { url: string }) {
+    this.requestUrl = options.url;
+  }
+
+  setup(signUrl: string) {
     if (isWeixinBrowser()) {
-      this.requestUrl = url;
-      let signUrl = window.location.href;
       if (isIos()) {
         signUrl = signUrl.split("#")[0];
       }
@@ -142,4 +148,12 @@ export class wxController {
       },
     });
   }
+
+  setPreviewData(url: string, urls: string[]) {
+    if (!this.signSuccess) return;
+    wx.previewImage({
+      current: url, // 当前显示图片的http链接
+      urls: urls, // 需要预览的图片http链接列表
+    });
+  }
 }

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

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

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

@@ -7,19 +7,33 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { defineComponent, onUnmounted, watch, watchEffect , ref, reactive, onMounted} from "vue";
-import { string} from "vue-types";
+import {
+  defineComponent,
+  onUnmounted,
+  watch,
+  watchEffect,
+  ref,
+  reactive,
+  onMounted,
+} from "vue";
+import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import { nextTick } from "process";
 import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
 
 function GetConfig() {
-  const fontSizeOptions=[];
-  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
+  const fontSizeOptions = [];
+  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60];
   for (const s of list) {
-    fontSizeOptions.push({title: s+"", model: s + "px"})
+    fontSizeOptions.push({ title: s + "", model: s + "px" });
   }
+  const fontFamilyOptions = [
+    { title: "宋体", model: "宋体,Songti,STSong,serif" },
+    { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" },
+    { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" },
+    { title: "楷体", model: "楷体,KaiTi,STKaiti,sans-serif" },
+  ];
   const config = {
     // updateSourceElementOnDestroy: true,
     language: "zh-cn",
@@ -36,7 +50,11 @@ function GetConfig() {
     ],
     fontSize: {
       options: fontSizeOptions,
-      supportAllValues:true,
+      supportAllValues: true,
+    },
+    fontFamily: {
+      options: fontFamilyOptions,
+      supportAllValues: true,
     },
     toolbar: {
       items: [
@@ -44,6 +62,7 @@ function GetConfig() {
         // "redo",
         // "|",
         "fontColor",
+        "fontFamily",
         "fontsize",
         "bold",
         "italic",
@@ -63,38 +82,38 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, actions} = useEditor();
+    const { store, actions } = useEditor();
 
     const state = reactive({
-       editableId: ""
-    })
-    
-    if (store.isEditMode ) {
-        actions.on("textFocus", function(compId, focus){
-            if (compId != props.compId) return;
-            if (focus) {
-              state.editableId = "" + Date.now();
-              return;
-            }
-            state.editableId = "";
-        })
+      editableId: "",
+    });
+
+    if (store.isEditMode) {
+      actions.on("textFocus", function (compId, focus) {
+        if (compId != props.compId) return;
+        if (focus) {
+          state.editableId = "" + Date.now();
+          return;
+        }
+        state.editableId = "";
+      });
     }
 
     return () => (
       <View
         class={[textStyle]}
         compId={props.compId}
-        onDblclick={()=>{
-           if (store.isEditMode) {
-              state.editableId = "" + Date.now();
-           }
+        onDblclick={() => {
+          if (store.isEditMode) {
+            state.editableId = "" + Date.now();
+          }
         }}
       >
       {
           state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
             state.editableId = "";
           }} /> 
-          : <div innerHTML={comp.value} />
+          : <div innerHTML={comp.value} class={readOnlyText} />
       }
       </View>
     );
@@ -107,24 +126,24 @@ const EditorComp = defineComponent({
   },
   emits: ["lost"],
 
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const inputRef = ref();
     let editorInstance = ref<InlineEditor>();
     const comp = useCompData(props.compId);
-    const { store, actions , helper, controls} = useEditor();
+    const { store, actions, helper, controls } = useEditor();
 
-   let blurCanceler:any= null;
-    onMounted(()=>{
+    let blurCanceler: any = null;
+    onMounted(() => {
       blurCanceler = blurHandle();
     });
-    onUnmounted(()=>{
+    onUnmounted(() => {
       blurCanceler?.();
-    })
+    });
 
     function blurHandle() {
       function blur(e: MouseEvent) {
         const target = e.target as HTMLElement;
-        if ( !editorInstance.value) return;
+        if (!editorInstance.value) return;
         if (
           editorInstance.value.ui.view.toolbar.element?.contains(target) ||
           editorInstance.value.ui.view.editable.element?.contains(target)
@@ -143,6 +162,8 @@ const EditorComp = defineComponent({
       };
     }
 
+    const preHeight = ref<number>(0);
+
     return ()=><ckeditor
           class={textStyle}
           ref={inputRef}
@@ -151,9 +172,19 @@ const EditorComp = defineComponent({
             if (editorInstance.value && comp.value !== value) {
               actions.updateCompData(comp, "value", value);
               nextTick(()=>{
-                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, helper.pxToDesignSize(inputRef.value?.$el.clientHeight)])
-                controls.selectCtrl.upgateGizmoStyle();
+              
+                const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
+                const isChange = Math.abs(preHeight.value - h) > 1;
+                preHeight.value = h;
+                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, preHeight.value])
                 helper.extendStreamCard(store.currStreamCardId);
+                if (isChange) {
+                  console.log("changing=>", isChange);
+                   actions.selectObjs([]);
+                   setTimeout(() => {
+                      actions.selectObjs([props.compId]);
+                   }, 0);
+                }
               })
             }
           }}
@@ -173,7 +204,9 @@ const EditorComp = defineComponent({
   },
 })
 
-
+const readOnlyText = css`
+  pointer-events: none;
+`
 
 const textStyle = css`
   font-size: 12px;

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -10,7 +10,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: `<p><span style="font-size:18px;">请输入内容</span></p>`,
+  value: `<p style="text-align:center;"><span style="font-size:18px;">请输入内容</span></p>`,
   layout: {
     size: [750, 60],
   },

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -1,7 +1,7 @@
 import { IconRotate , IconMove} from "@/assets/icons";
 import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted, ref, nextTick } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, nextTick, reactive, watch } from "vue";
 import { useEditor } from "../../../..";
 
 
@@ -11,22 +11,44 @@ export const SelectTransfer = defineComponent({
     const { controls, store } = editor;
     const { selectCtrl } = controls;
     const { transferStyle } = selectCtrl;
+    const toolbarRef = ref<HTMLElement>();
+  
+    const state = reactive({
+       toolbarW: 0,
+       toolbarOpts: [] as any[],
+    })
 
+    watch(()=>[store.selectId, store.selected], ()=>{
+      console.log("changing--")
+      if (store.selected.length == 1) {
+        const comp = store.compMap[store.selected[0]];
+        //@ts-ignore
+        state.toolbarOpts = CompToolbars[comp.compKey] || CompToolbars.default;
+      }  else {
+        state.toolbarOpts = CompToolbars.MultiSelector;
+      }
+      nextTick(()=>{
+        nextTick(()=>{
+          if (!toolbarRef.value) {
+            return
+          }  
+          const r = toolbarRef.value.getBoundingClientRect();
+          state.toolbarW = r.width;
+        })
+      })
+    })
 
+  
     return () => {
-      let toolbarOpts = CompToolbars.default;
+      
       let comp: any = null;
-      if (selectCtrl.selected.length == 1) {
-        comp = selectCtrl.selected[0].comp;
-        //@ts-ignore
-        toolbarOpts = CompToolbars[comp.compKey] || toolbarOpts;
-      }  else {
-        toolbarOpts = CompToolbars.MultiSelector;
+      if (store.selected.length == 1) {
+        comp = store.compMap[store.selected[0]];
       }
 
-      const w = selectCtrl.objContainer?.getBound();
+      const w :any = selectCtrl.objContainer?.getBound();
       const isTextEdit = selectCtrl.selected.length == 1 && selectCtrl.selected[0].comp.compKey == "Text";
-
+  
       return (
         <div
           class={[
@@ -42,11 +64,12 @@ export const SelectTransfer = defineComponent({
             class={toolbarStyle}
             style={{
               top: w?.y + "px",
-              left: w?.x + "px",
+              left: (w?.x + w?.width / 2.0 - state.toolbarW / 2.0)  + "px",
             }}
+            ref= {toolbarRef}
           >
             {
-              toolbarOpts.map((item) => {
+              state.toolbarOpts.map((item) => {
                 return item.getVisible.call(editor, comp) ? (
                   <item.component
                     class="p-4px"
@@ -231,6 +254,7 @@ const transformBtnsStyle = css`
   z-index: 999;
   pointer-events: auto;
   transform-origin: 50% 100%;
+  pointer-events: none;
 `;
 
 const transBtnStyle = css`
@@ -246,6 +270,7 @@ const transBtnStyle = css`
   position: relative;
   top: 50px;
   @apply shadow cursor-move;
+  pointer-events: auto;
 
   &:hover {
     color: #fff;

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

@@ -85,7 +85,6 @@ export default defineUI({
                           onDragStart={() => (state.draging = true)}
                           onDragEnd={() => {
                             state.draging = false
-                            controls.selectCtrl.selecteObjs([])
                           }}
                           non-drag-area-selector={".drag-disable"}
                         >

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

@@ -383,25 +383,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (this._mouseDownFlag == "toolbar") {
       return;
     }
-
-    if (isClick) {
-      this.actions.pickComp(this._downClickedCompId);
-    }
-
+    
     if (isClick) {
       this._state = MODE_NONE;
-
-      if (this._downClickedCompId) {
-        const compKey = this.getDivFlag(e.target as any, "compKey");
-        console.log("up compKey === >", compKey);
-        if (compKey == "Text" ) { //点击鼠标上来后 focus文本选中
-             const compId = this.getDivFlag(e.target as any, "compId");
-             if ( this.selected.length ==  1 && this.store.currComp.id == compId ) {
-                //取消当前选择
-                this.selecteObjs([])
-             }
-        }
-      }
+      this.actions.pickComp(this._downClickedCompId);
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {

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

@@ -8,7 +8,7 @@ import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
 
-  pickComp(compId: string) {
+  pickComp(compId: string, selected = true) {
     if (compId == "") {//空的时候,就选择根页面
       compId = "root";
     }
@@ -26,13 +26,12 @@ export const editActions = EditorModule.action({
     }
 
     if (this.store.currCompId == compId) {
-      //this.controls.selectCtrl.upgateGizmoStyle();
       return;
     }
-
     this.store.setCurrComp(compId);
-
-    selectCardChild(compId);
+    if (selected) {
+      selectCardChild(compId);
+    }
   },
 
   
@@ -84,8 +83,8 @@ export const editActions = EditorModule.action({
     const obj = new CompObject(currComp)
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+  
     this.actions.pickComp(compId)
-
     this.helper.extendStreamCard(currCard.id);
 
     if (compKey == "Text") {
@@ -107,7 +106,13 @@ export const editActions = EditorModule.action({
       this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
       cardPoints.y
     );
+
     this.helper.extendStreamCard(this.store.currStreamCardId);
+
+    if (compKey == "Text") {
+      this.actions.selectObjs([]);
+      this.actions.textFocus(currComp.id, true);
+    }
   },
   
    async selectObjs(ids: string[]) {
@@ -209,7 +214,7 @@ export const editActions = EditorModule.action({
 
       this.helper.extendStreamCard(cardid);
 
-      this.controls.selectCtrl.selecteObjs([]);
+      this.actions.selectObjs([]);
     }
   },
 

src/modules/editor/module/index.ts

@@ -17,6 +17,7 @@ import { DragAddCtrl } from "../controllers/DragAddCtrl";
 import { SelectCtrl } from "../controllers/SelectCtrl";
 import { CompObject } from "../controllers/SelectCtrl/compObj";
 import { manualActions } from "./actions/editWithManualHistory";
+import { wxController } from "@/controllers/wxController";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -26,7 +27,12 @@ export class EditorModule extends ModuleRoot {
   });
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions, ImgCompActions, manualActions]);
+  actions = this.createActions([
+    initActions,
+    editActions,
+    ImgCompActions,
+    manualActions,
+  ]);
   https = this.createHttps(https);
   store = this.createStore(store, {
     transform: (state) => createProxy(state),
@@ -40,6 +46,9 @@ export class EditorModule extends ModuleRoot {
       },
       dir: "queenshow",
     }),
+    wxCtrl: new wxController({
+      url: `${Dict_Apis.promotion}/wechat/share?`,
+    }),
     transferCtrl: new TransferCtrl(this),
     dragAddCtrl: new DragAddCtrl(this),
     streamCardTransferCtrl: new TransferCtrl(this),

src/modules/editor/module/stores/index.ts

@@ -15,10 +15,8 @@ export const store = EditorModule.store({
     groupIds: [] as string[],
     compPids: {} as Record<string, string>,
 
-  
-
     selected: [] as string[], //选中的组件
-    selectId: "",    //选中的id唯一标识一次选中
+    selectId: "", //选中的id唯一标识一次选中
   }),
   getters: {
     isEditMode(): boolean {
@@ -49,6 +47,15 @@ export const store = EditorModule.store({
     streamCardIds(state): string[] {
       return state.designData.compMap.root?.children.default || [];
     },
+    previewImageList(state) {
+      const res: string[] = [];
+      Object.values(state.designData.compMap)
+        .filter((d) => d.compKey == "Image")
+        .forEach((value) => {
+          res.push(value.value?.url);
+        });
+      return res;
+    },
   },
   actions: {
     setCompData(id: string, data: any) {
@@ -90,9 +97,9 @@ export const store = EditorModule.store({
       const comps = this.helper.getCompTrees(compId);
 
       if (compId == "root") {
-          return;
+        return;
       }
-      this.store.currStreamCardId = comps[1]?.id || ''
+      this.store.currStreamCardId = comps[1]?.id || "";
     },
 
     deleteComp(compId: string) {
@@ -122,7 +129,7 @@ export const store = EditorModule.store({
       }
     },
     moveComp(selIndex: number, targetIndex: number) {
-      const pageCompIds = [...this.store.pageCompIds]
+      const pageCompIds = [...this.store.pageCompIds];
       const [selComp] = pageCompIds.splice(selIndex, 1);
       pageCompIds.splice(targetIndex, 0, selComp);
       this.store.designData.compMap.root.children.default = pageCompIds;

src/pages/share/Promotion/index.tsx

@@ -1,5 +1,3 @@
-import { wxController } from "@/controllers/wxController";
-import { Dict_Apis } from "@/dict";
 import { initEditor } from "@/modules/editor";
 import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
@@ -9,14 +7,11 @@ export default defineComponent(() => {
   const params = new URLSearchParams(location.href.split("?")[1]);
   const id = params.get("id");
 
-  const wxSdk = new wxController();
-  const url = `${Dict_Apis.promotion}/wechat/share?`;
-  wxSdk.init(url);
-
   editor.actions.switchMode("preview");
 
   if (id) {
     editor.actions.initDesign(id);
+    editor.controls.wxCtrl.setup(window.location.href);
 
     editor.actions.on("initDesign:success", () => {
       const data = editor.store.designData;
@@ -27,8 +22,8 @@ export default defineComponent(() => {
         imgUrl: data.thumbnail || "",
         desc: data.desc,
       };
-      wxSdk.setShareData(shareData);
-      wxSdk.setShare(shareData);
+      editor.controls.wxCtrl.setShareData(shareData);
+      editor.controls.wxCtrl.setShare(shareData);
     });
   }