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

@@ -29,7 +29,7 @@ function GetConfig() {
     fontSizeOptions.push({ title: s + "", model: s + "px" });
   }
   const fontFamilyOptions = [
-    { title: "宋体", model: "宋体,Songti STSong,serif" },
+    { title: "宋体", model: "宋体,Songti,STSong,serif" },
     { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" },
     { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" },
     { title: "楷体", model: "楷体,KaiTi,STKaiti,sans-serif" },
@@ -109,17 +109,12 @@ export const Component = defineComponent({
           }
         }}
       >
-        {state.editableId ? (
-          <EditorComp
-            compId={props.compId}
-            key={state.editableId}
-            onLost={() => {
-              state.editableId = "";
-            }}
-          />
-        ) : (
-          <div innerHTML={comp.value} />
-        )}
+      {
+          state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
+            state.editableId = "";
+          }} /> 
+          : <div innerHTML={comp.value} class={readOnlyText} />
+      }
       </View>
     );
   },
@@ -167,41 +162,51 @@ const EditorComp = defineComponent({
       };
     }
 
-    return () => (
-      <ckeditor
-        class={textStyle}
-        ref={inputRef}
-        editor={InlineEditor}
-        onInput={(value: any) => {
-          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();
-              helper.extendStreamCard(store.currStreamCardId);
-            });
-          }
-        }}
-        onReady={(editor: InlineEditor) => {
-          editorInstance.value = editor;
-          console.log("editor");
-          editor.setData(comp.value);
-          editor.focus();
-          const range = document.createRange();
-          range.selectNodeContents(inputRef.value.$el);
-          const selection = window.getSelection();
-          selection?.removeAllRanges();
-          selection?.addRange(range);
-        }}
-        config={GetConfig()}
-      />
-    );
+    const preHeight = ref<number>(0);
+
+    return ()=><ckeditor
+          class={textStyle}
+          ref={inputRef}
+          editor={InlineEditor}
+          onInput={(value: any) => {
+            if (editorInstance.value && comp.value !== value) {
+              actions.updateCompData(comp, "value", value);
+              nextTick(()=>{
+              
+                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);
+                }
+              })
+            }
+          }}
+          onReady={(editor: InlineEditor) => {
+            editorInstance.value = editor;
+            console.log("editor")
+            editor.setData(comp.value);
+            editor.focus();
+            const range = document.createRange();
+            range.selectNodeContents(inputRef.value.$el);
+            const  selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+          }}
+          config={GetConfig()}
+        />
   },
-});
+})
+
+const readOnlyText = css`
+  pointer-events: none;
+`
 
 const textStyle = css`
   font-size: 0.24rem;

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:0.36rem;">请输入内容</span></p>`,
+  value: `<p style="text-align:center;"><span style="font-size:0.36rem;">请输入内容</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[]) {

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 { defineComponent } from "vue";
 
@@ -8,14 +6,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;
@@ -26,8 +21,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);
     });
   }