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

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

@@ -20,6 +20,7 @@ import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
 import { queenApi } from "queenjs";
 import {
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   reactive,
@@ -394,26 +395,40 @@ export const TextStroke = defineComponent({
   },
 });
 
-export const LinkButton = defineComponent({
-  props: {
-    icon: any(),
-    value: any(),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const showLinkInput = async () => {
-      const res = await queenApi.showInput({
-        title: "请输入链接地址",
-        defaultValue: "http://",
-      });
-      emit("change", res);
-    };
-    return () => (
-      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
-    );
-  },
-});
-
+// export const LinkButton = defineComponent({
+//   props: {
+//     icon: any(),
+//     value: any(),
+//   },
+//   emits: ["change"],
+//   setup(props, { emit }) {
+//     const showLinkInput = async () => {
+//       const res = await queenApi.showInput({
+//         title: "请输入链接地址",
+//         defaultValue: "http://",
+//       });
+//       emit("change", res);
+//     };
+//     return () => (
+//       <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
+//     );
+//   },
+// });
+const stylesKey: { [key: string]: any } = {
+  fontSize: "font-size",
+  fontFamily: "font-family",
+  letterSpacing: "letter-spacing",
+  lineHeight: "line-height",
+  alignment: "text-align",
+  fontColor: "color",
+  textStroke: "-webkit-text-stroke",
+};
+const tagsKey: { [key: string]: any } = {
+  bold: "<strong>",
+  italic: "<i>",
+  underline: "<u>",
+  strikethrough: "<s>",
+};
 export const TextToolItem = defineComponent({
   props: {
     column: object<ColumnItem>(),
@@ -422,10 +437,10 @@ export const TextToolItem = defineComponent({
   },
   setup(props) {
     const state = reactive({
-      value: undefined,
+      value: undefined as any,
     });
 
-    const { controls } = useEditor();
+    const { controls, store, actions, helper } = useEditor();
     let editor: any = null;
     watch(
       () => controls.textEditorCtrl.state.currEditor,
@@ -434,6 +449,31 @@ export const TextToolItem = defineComponent({
         initCommands();
       }
     );
+    watch(
+      () => store.currComp.value,
+      () => {
+        editor = toRaw(controls.textEditorCtrl.state.currEditor);
+        if (!editor && store.currComp.compKey == "Text") {
+          initCommands();
+          nextTick(() => {
+            const element: HTMLElement | null = document.querySelector(
+              `#editor_${store.currComp.id}`
+            );
+            if (!element) {
+              return;
+            }
+            const h = helper.pxToDesignSize(element.clientHeight);
+            console.log(h);
+            actions.updateCompData(store.currComp, "layout.size.1", h);
+            helper.extendStreamCard(store.currStreamCardId);
+            actions.selectObjs([]);
+            setTimeout(() => {
+              actions.selectObjs([store.currComp.id]);
+            }, 0);
+          });
+        }
+      }
+    );
     function handleValueChange() {
       const { column } = props;
       if (!editor) {
@@ -447,6 +487,30 @@ export const TextToolItem = defineComponent({
     const initCommands = () => {
       const { column } = props;
       if (!editor) {
+        if (!column?.dataIndex) {
+          return;
+        }
+        const compValue = store.currComp.value;
+        if (tagsKey[column.dataIndex]) {
+          const hasTag = compValue.indexOf(tagsKey[column.dataIndex]);
+          if (hasTag != -1) {
+            state.value = true;
+          } else {
+            state.value = false;
+          }
+          return;
+        }
+        const regString = `(${stylesKey[column.dataIndex]}:)([\\s\\S]*?)(\\;)`;
+        const styleReg = new RegExp(regString, "ig");
+
+        const values = compValue.match(styleReg);
+        if (!values) {
+          state.value = undefined;
+          return;
+        }
+        let value = values[0];
+        value = value.replace(styleReg, "$2");
+        state.value = value;
         return;
       }
       const command = editor.commands.get(column?.dataIndex);

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

@@ -27,7 +27,7 @@ export const TextToolForm = defineComponent({
     const changeVal = (e: { dataIndex: string; value: any }) => {
       let editor = controls.textEditorCtrl.state.currEditor;
       if (!editor) {
-        // controls.textEditorCtrl.setCompValueInReg(e.dataIndex, e.value);
+        controls.textEditorCtrl.setCompValueInReg(e.dataIndex, e.value);
         return;
       }
       editor = toRaw(editor);

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

@@ -51,6 +51,7 @@ export const Component = defineComponent({
         ) : (
           <div
             innerHTML={comp.value}
+            id={`editor_${props.compId}`}
             class={[textStyle, store.isEditMode && `pointer-events-none`]}
           />
         )}
@@ -67,6 +68,7 @@ const EditorComp = defineComponent({
 
   setup(props, { emit }) {
     let editorRefVal = ref<HeadlessEditor>().value;
+    let editorDomRef=ref<HTMLElement>()
     const comp = useCompData(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
@@ -158,17 +160,17 @@ const EditorComp = defineComponent({
       };
     }
     const initEditor = async () => {
-      const dom: HTMLElement | null = document.querySelector(
-        `#editor_${props.compId}`
-      );
-      if (!dom) {
+      // const dom: HTMLElement | null = document.querySelector(
+      //   `#editor_${props.compId}`
+      // );
+      if (!editorDomRef.value) {
         return;
       }
-      editorRefVal = await HeadlessEditor.create(dom);
+      editorRefVal = await HeadlessEditor.create(editorDomRef.value);
       editorRefVal.setData(comp.value);
       editorRefVal.focus();
       const range = document.createRange();
-      range.selectNodeContents(dom);
+      range.selectNodeContents(editorDomRef.value);
       const selection = window.getSelection();
       selection?.removeAllRanges();
       selection?.addRange(range);
@@ -186,11 +188,7 @@ const EditorComp = defineComponent({
             const h = helper.pxToDesignSize(element.clientHeight);
             const isChange = Math.abs(preHeight.value - h) > 1;
             preHeight.value = h;
-            actions.updateCompDatas(
-              comp,
-              ["value", "layout.size.1"],
-              [value, preHeight.value]
-            );
+            actions.updateCompData(comp, "layout.size.1", preHeight.value);
             helper.extendStreamCard(store.currStreamCardId);
             if (isChange) {
               actions.selectObjs([]);
@@ -212,7 +210,7 @@ const EditorComp = defineComponent({
       });
     });
     return () => {
-      return <div class={textStyle} id={`editor_${props.compId}`}></div>;
+      return <div class={textStyle} ref={editorDomRef} ></div>;
     };
   },
 });

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

@@ -122,17 +122,11 @@ export class AssistRulerCtrl {
     const pageViewPort = this.ctrl.pageEl as HTMLElement;
     const pageBox = pageViewPort.getBoundingClientRect();
 
-    // if ( !this._currAddingRuler ) this._currAddingRuler = {cid: this.ctrl.getCurrCard().id};
-
     if (typeIndex == 0 || typeIndex == 1) {
-      let mx = e.clientX;
-      if (Math.abs(mx - pageBox.left) < 2) {
-        //吸附效果
-        mx = pageBox.left;
-      }
+      let mx = e.clientX - box.left;
       let x = mx;
       let y = this.ctrl._selCanvaseSize.h;
-      ctx.moveTo(x * 2, box.y * 2);
+      ctx.moveTo(x * 2, 0);
       ctx.lineTo(x * 2, y);
       if (typeIndex == 0) {
         ctx.fillText(
@@ -151,9 +145,10 @@ export class AssistRulerCtrl {
     } else {
       const x1 = box.left * 2,
         x2 = box.right * 2;
-      const y = e.clientY * 2;
-      ctx.moveTo(x1, y);
-      ctx.lineTo(x2, y);
+      const y = (e.clientY - box.top) * 2;
+
+      ctx.moveTo(0, y);
+      ctx.lineTo(this.ctrl._selCanvaseSize.w,  y);
 
       const curBox = this.ctrl.getCurrCardViewPortBox();
       if (typeIndex == 2) {
@@ -183,11 +178,13 @@ export class AssistRulerCtrl {
     if (!this._currAddingRuler) {
       return;
     }
+
     const viewPort = this.ctrl.pageEl as HTMLElement;
     const box = viewPort.getBoundingClientRect();
     const currDragItem = this._currAddingRuler;
     const verz = currDragItem.verz || 0;
     const horz = currDragItem.horz || 0;
+
     if (verz < 0 || horz < 0 || verz > box.width * 2 || horz > box.height * 2) {
       this._currAddingRuler = undefined;
       return;
@@ -197,8 +194,6 @@ export class AssistRulerCtrl {
 
     console.log("rulerLineMouseUp=>", e.clientY);
     this._currAddingRuler = undefined;
-
-    //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
   }
 
   draw() {
@@ -227,14 +222,14 @@ export class AssistRulerCtrl {
       if (item.horz != undefined) {
         //水平线
         ctx.beginPath();
-        ctx.moveTo(box.x * 2, item.horz + pageELBox.top * 2);
-        ctx.lineTo(box.right * 2, item.horz + pageELBox.top * 2);
+        ctx.moveTo(0, item.horz + pageELBox.top * 2);
+        ctx.lineTo(this.ctrl._selCanvaseSize.w, item.horz + pageELBox.top * 2);
         ctx.stroke();
         ctx.closePath();
       } else if (item.verz != undefined) {
         ctx.beginPath();
         const x = item.verz + pageELBox.left * 2;
-        ctx.moveTo(x, box.y * 2);
+        ctx.moveTo(x, 0);
         ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
         ctx.stroke();
         ctx.closePath();

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

@@ -25,63 +25,211 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       title: "请输入链接地址",
       defaultValue: "http://",
     });
-    if (!res || !this.state.currEditor) {
+    if (!res) {
+      return;
+    }
+    if (!this.state.currEditor) {
+      let alink = `<a href="${res}"><span style="font-size:14px">${res}</span></a>`;
+      const compValue = this.store.currComp.value;
+      const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+      const blocks = compValue.match(pTagReg);
+      if (!blocks) {
+        return;
+      }
+      blocks[blocks.length - 1] = blocks[blocks.length - 1].replace(
+        pTagReg,
+        `$1$2${alink}$3`
+      );
+      this.actions.updateCompData(
+        this.store.currComp,
+        "value",
+        blocks.join("")
+      );
       return;
     }
     const editor = toRaw(this.state.currEditor);
     editor.execute("link", res);
   }
   setCompValueInReg(key: string, e: any) {
-    console.log(key, e);
     const addTagsKey = ["bold", "italic", "underline", "strikethrough"];
     if (addTagsKey.includes(key)) {
       this.addCompValueTags(key, e);
       return;
     }
     const compValue = this.store.currComp.value;
-    const regString = `(${stylesKey[key]}:)([0-9a-zA-z#.])*(\\;)`;
-    const styleReg = new RegExp(regString, "ig");
-    const matchs = compValue.match(styleReg);
-    if (matchs) {
-      const changeValue = compValue.replace(styleReg, `$1${e.value}$3`);
-      console.log(changeValue);
-      this.actions.updateCompData(this.store.currComp, "value", changeValue);
+
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const blocks = compValue.match(pTagReg);
+    if (!blocks) {
+      return;
+    }
+    const blockStyles = ["lineHeight", "alignment"];
+
+    blocks.map((item: string, index: number) => {
+      const isBlockStyle = blockStyles.includes(key);
+      let stylesStr = null;
+      if (isBlockStyle) {
+        stylesStr = this.blockStyleChange(item, key, e);
+      } else {
+        stylesStr = this.spanStyleChange(item, key, e);
+      }
+
+      blocks[index] = stylesStr;
+    });
+    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+  }
+  blockStyleChange(item: string, key: string, e: any) {
+    const pStyleReg = /<p[\s|\s]*style=[\s|\S]*?>/;
+    let blockStr = item;
+    const hasStyles = item.indexOf(stylesKey[key]);
+    if (hasStyles != -1) {
+      const regString = `(${stylesKey[key]}:)([\\s\\S]*?)(\\;)`;
+      const styleReg = new RegExp(regString, "ig");
+      blockStr = item.replace(styleReg, `$1${e.value}$3`);
+      return blockStr;
+    }
+    if (pStyleReg.test(item)) {
+      const addStyleReg = /(<p[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
+      blockStr = item.replace(addStyleReg, `$${stylesKey[key]}:${e.value};$2`);
     } else {
-      console.log(1);
+      const noStyleReg = /(<p[\s|\s]*)(>[\s|\S]*)/;
+      blockStr = item.replace(
+        noStyleReg,
+        `$1 style="${stylesKey[key]}:${e.value};"$2`
+      );
     }
+    return blockStr;
+  }
+  spanStyleChange(item: string, key: string, e: any) {
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    let spanStr = item;
+    const hasSpan: any = spanStr.indexOf("span");
+    if (hasSpan == -1) {
+      spanStr = spanStr.replace(
+        pTagReg,
+        '$1<span style="font-size:14px;">$2</span>$3'
+      );
+    }
+    const hasStyles = item.indexOf(stylesKey[key]);
+    if (hasStyles != -1) {
+      const regString = `(${stylesKey[key]}:)([\\s\\S]*?)(\\;)`;
+      const styleReg = new RegExp(regString, "ig");
+      spanStr = spanStr.replace(styleReg, `$1${e.value}$3`);
+    } else {
+      const addStyleReg = /(<span\s*style=[\s|\S]*?)(">[\s|\S]*?<\/span>)/g;
+      spanStr = spanStr.replace(
+        addStyleReg,
+        `$1${stylesKey[key]}:${e.value};$2`
+      );
+    }
+
+    const noStyleReg = /(<span\s*?)(>[\s|\S]*?<\/span>)/g;
+    spanStr = spanStr.replace(
+      noStyleReg,
+      `$1 style="${stylesKey[key]}:${e.value};">$2`
+    );
+
+    return spanStr;
   }
-  addCompValueTags(key: string, e: any) {
-    // console.log(key, e);
-    // // const
-    // // ("i s strong u");
-    // const keyToTags = {
-    //   italic: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    //   strikethrough: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
 
-    //   bold: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    //   underline: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    // };
-    // const compValue = this.store.currComp.value;
-    // console.log(compValue);
-    // const blocks = compValue.match(/<p(([\s\S])*?)<\/p>/gi);
-    // if (!blocks) {
-    //   return;
-    // }
-    // blocks.map((item: string, index: number) => {
+  addCompValueTags(key: string, e: any) {
+    const compValue = this.store.currComp.value;
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const blocks = compValue.match(pTagReg);
+    if (!blocks) {
+      return;
+    }
+    blocks.map((item: string, index: number) => {
+      const hasSpan: any = item.indexOf("span");
+      if (hasSpan != -1) {
+        blocks[index] = this.formatSortTags(item, key, e);
+        return;
+      }
+      const spanStr = item.replace(
+        pTagReg,
+        '$1<span style="font-size:14px;">$2</span>$3'
+      );
+      blocks[index] = this.formatSortTags(spanStr, key, e);
+    });
+    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+  }
+  formatSortTags(item: string, key: string, e: any) {
+    const keyToTags: { [key: string]: any }[] = [
+      {
+        key: "italic",
+        tag: "<i>",
+        end: "</i>",
+      },
+      {
+        key: "strikethrough",
+        tag: "<s>",
+        end: "</s>",
+      },
+      {
+        key: "bold",
+        tag: "<strong>",
+        end: "</strong>",
+      },
+      {
+        key: "underline",
+        tag: "<u>",
+        end: "</u>",
+      },
+    ];
+    const spanTagReg = /([\s\S]*?<span[\s\S]*?>)([\s\S]*?)(<\/span>[\s\S]*?)/gi;
+    let htmlStr = item;
 
-    // });
-    // console.log(blocks);
+    if (e.value) {
+      const currTagIndex = keyToTags.findIndex((e: any) => {
+        return e.key == key;
+      });
+      if (currTagIndex == -1) {
+        return htmlStr;
+      }
+      if (htmlStr.indexOf(keyToTags[currTagIndex].tag) != -1) {
+        return htmlStr;
+      }
+      if (currTagIndex == 0) {
+        htmlStr = htmlStr.replace(
+          spanTagReg,
+          `$1${keyToTags[0].tag}$2${keyToTags[0].end}$3`
+        );
+      }
+      if (currTagIndex > 0) {
+        let prevTagIndex = currTagIndex - 1;
+        let prevTag: any = null;
+        for (let i = prevTagIndex; i >= 0; i--) {
+          const hasTag: any = htmlStr.indexOf(keyToTags[prevTagIndex].tag);
+          if (hasTag != -1) {
+            prevTag = keyToTags[prevTagIndex];
+            break;
+          }
+        }
+        if (prevTag) {
+          const regString = `([\\s\\S]*?)(${prevTag.tag})([\\s\\S]*?)(${prevTag.end})([\\s\\S]*?)`;
+          const tempReg = new RegExp(regString, "ig");
+          htmlStr = htmlStr.replace(
+            tempReg,
+            `$1$2${keyToTags[currTagIndex].tag}$3${keyToTags[currTagIndex].end}$4$5`
+          );
+        } else {
+          htmlStr = htmlStr.replace(
+            spanTagReg,
+            `$1${keyToTags[currTagIndex].tag}$2${keyToTags[currTagIndex].end}$3`
+          );
+        }
+      }
+    } else {
+      const currTag = keyToTags.find((e: any) => {
+        return e.key == key;
+      });
+      if (!currTag) {
+        return htmlStr;
+      }
+      const regString = `([\\s\\S]*?)(${currTag?.tag})([\\s\\S]*?)(${currTag?.end})([\\s\\S]*?)`;
+      const tempReg = new RegExp(regString, "ig");
+      htmlStr = htmlStr.replace(tempReg, "$1$3$5");
+    }
+    return htmlStr;
   }
 }

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

@@ -93,9 +93,11 @@ export const editActions = EditorModule.action({
     const currComp = this.helper.findComp(compId) as DesignComp;
     cb?.(currComp);
 
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
+
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      375 - (currComp.layout.size?.[0] || 750) / 2
+      w / 2.0  - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
     //没有选中组件添加到当前卡片最后
@@ -159,10 +161,11 @@ export const editActions = EditorModule.action({
     }
 
     const currComp = this.helper.findComp(addedId) as DesignComp;
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      375 - (currComp.layout.size?.[0] || 750) / 2
+      w / 2.0 - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
 
@@ -208,9 +211,12 @@ export const editActions = EditorModule.action({
       const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
       const { currComp } = this.store;
       let selCtrl = this.controls.selectCtrl;
+
+      const w = this.controls.screenCtrl.getCurrScreenWidth();
+
       selCtrl.translate(
         this.helper.designSizeToPx(
-          375 - (currComp.layout.size?.[0] || 750) / 2
+          w/2.0 - (currComp.layout.size?.[0] || w) / 2
         ),
         cardPoints.y
       );
@@ -316,8 +322,9 @@ export const editActions = EditorModule.action({
   setSameSize(isWidth: boolean) {
     const selectCtrl = this.controls.selectCtrl;
     const objc = selectCtrl.objContainer as ObjsContainer;
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.store.selected.length == 1) {
-      if (isWidth) this.store.currComp.layout.size[0] = 750;
+      if (isWidth) this.store.currComp.layout.size[0] = w;
       else this.store.currComp.layout.size[1] = this.store.currStreamCard.layout.size[1];
 
       objc.updateSize();
@@ -672,6 +679,7 @@ export const editActions = EditorModule.action({
   setAlignX(flag: 0 | 1 | 2 | 3) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
+    const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
 
     if (this.store.selected.length == 1) {
       const objc = selectCtrl.objContainer as ObjsContainer;
@@ -681,10 +689,10 @@ export const editActions = EditorModule.action({
           selectCtrl.translate(-box.left, 0);
           break;
         case 1:
-          selectCtrl.translate(-(box.center.x - 187.5), 0);
+          selectCtrl.translate(-(box.center.x - w / 2.0), 0);
           break;
         case 2:
-          selectCtrl.translate(375 - box.right, 0);
+          selectCtrl.translate(w - box.right, 0);
           break;
       }
       return;
@@ -854,9 +862,10 @@ export const editActions = EditorModule.action({
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
   },
+
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
-    comp.layout.size[0] = 750;
+    comp.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
   },
   //
   setCompAlign(comp: DesignComp, align: string) {