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

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

@@ -68,7 +68,7 @@ const EditorComp = defineComponent({
 
   setup(props, { emit }) {
     let editorRefVal = ref<HeadlessEditor>().value;
-    let editorDomRef=ref<HTMLElement>()
+    let editorDomRef = ref<HTMLElement>();
     const comp = useCompData(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
@@ -210,7 +210,7 @@ const EditorComp = defineComponent({
       });
     });
     return () => {
-      return <div class={textStyle} ref={editorDomRef} ></div>;
+      return <div class={textStyle} ref={editorDomRef}></div>;
     };
   },
 });
@@ -220,7 +220,16 @@ const textStyle = css`
   width: 100%;
   color: #666;
   word-break: break-all;
-
+  h2 {
+    color: #111111;
+    font-size: 24px;
+    margin-bottom: 0;
+  }
+  h3 {
+    color: #333333;
+    font-size: 18px;
+    margin-bottom: 0;
+  }
   p {
     margin: 0;
   }

src/modules/editor/components/CompUI/defines/alignMulti.tsx

@@ -0,0 +1,90 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { SelItemsAlignTools, CompAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
+import { css } from "@linaria/core";
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    value: string(),
+  },
+  setup(props) {
+    const editor = useEditor();
+    return ()=>{
+
+      return (
+        <>
+          {
+             editor.store.selected.length > 1 && <div class={AlignToolsStyle}>
+                <div>
+                    <span class="text-white">元素 (已选{editor.store.selected.length})</span>
+                </div>
+
+                <div class="flex py-12px px-0px items-center">
+                    <span class="pr-32px">对齐</span>
+                    <div class="row flex-1 flex">
+                        {SelItemsAlignTools.Left.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                    <div class="row ml-10px flex-1 flex">
+                        {SelItemsAlignTools.right.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                </div>
+                <div class = "mt-16px">
+                    <span class="text-white">布局</span>
+                </div>
+                <div class="flex py-12px px-0px items-center">
+                    <span class="pr-32px">对齐</span>
+                    <div class="row flex-1 flex">
+                        {CompAlignTools.Left.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any, true)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                    <div class="row ml-10px flex-1 flex">
+                        {CompAlignTools.right.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any, true)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                </div>
+            </div>
+          }
+        </>
+      );
+    };
+  },
+});
+
+const AlignToolsStyle = css`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .row {
+    background: #303030;
+    border-radius: 4px 4px 4px 4px;
+  }
+`;

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -9,6 +9,7 @@ import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
 import Align from "./align";
 import { css } from "@linaria/core";
+import AlignMulti from "./alignMulti";
 
 export const layoutColumns: ColumnItem[] = [
   {
@@ -265,10 +266,17 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
         actions.submitUpdate();
       }
 
+
+
       return () => {
         const { component } = props;
+
+        if (store.selected.length > 1) return (<AlignMulti />);
+
         return (
           <div class={formStyle}>
+           
+
             {valueColumns.length ? (
               <>
                 <div>

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

@@ -80,7 +80,7 @@ export default defineUI({
                       style.border = "3px solid #EA9E40"
                     }
                   return (<Draggable>
-                      <div key={item} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
+                      <div key={item + controls.screenCtrl.currScreenId} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
                          actions.selectObjs([]);
                          actions.pickComp(item, false);
                          controls.editorCtrl.autoInScreen();
@@ -153,7 +153,7 @@ export default defineUI({
                       controls.compUICtrl.state.components.get(comp.compKey)
                         ?.Component || NotFoundComp;
                     return (
-                        <Comp compId={comp.id}  key={comp.id} showMask={true} />
+                        <Comp compId={comp.id}  key={comp.id + controls.screenCtrl.currScreenId} showMask={true} />
                     );
                   },
                 }}

src/modules/editor/components/Viewport/Slider/SliderLeft/Text.tsx

@@ -33,7 +33,7 @@ export default defineUI({
                 class={"btn_item text-16px font-600"}
                 onClick={() => {
                   const h2 =
-                    '<p style="line-height:1.5;text-align:center;"><span style="color:#111111;font-size:24px"><strong>请输入标题</strong></span></p>';
+                    '<h2 style="line-height:1.5;text-align:center;"><span style="color:#111111;font-size:24px;">请输入标题</span></h2>';
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {
@@ -48,7 +48,7 @@ export default defineUI({
                 class={"btn_item font-600"}
                 onClick={() => {
                   const h3 =
-                    '<p style="line-height:1.5;text-align:center;"><span style="color:#333333;font-size:18px">请输入副标题</span></p>';
+                    '<h3 style="line-height:1.5;text-align:center;"><span style="color:#333333;font-size:18px;">请输入副标题</span></h3>';
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {

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

@@ -51,6 +51,10 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
     {
       hotKey: "Backspace,del",
       action() {
+        if (this.store.selected.length > 1) {
+          this.actions.removeSelectComps();
+          return;
+        }
         this.actions.removeComp(this.store.currCompId);
       },
     },

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

@@ -31,7 +31,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     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 pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
       const blocks = compValue.match(pTagReg);
       if (!blocks) {
         return;
@@ -58,7 +58,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     }
     const compValue = this.store.currComp.value;
 
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
     if (!blocks) {
       return;
@@ -79,7 +79,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
   }
   blockStyleChange(item: string, key: string, e: any) {
-    const pStyleReg = /<p[\s|\s]*style=[\s|\S]*?>/;
+    const pStyleReg = /<(p|h2|h3)[\s|\s]*style=[\s|\S]*?>/;
     let blockStr = item;
     const hasStyles = item.indexOf(stylesKey[key]);
     if (hasStyles != -1) {
@@ -89,25 +89,25 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       return blockStr;
     }
     if (pStyleReg.test(item)) {
-      const addStyleReg = /(<p[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
-      blockStr = item.replace(addStyleReg, `$1${stylesKey[key]}:${e.value};$2`);
+      const addStyleReg = /(<(p|h2|h3)[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
+      blockStr = item.replace(addStyleReg, `$1${stylesKey[key]}:${e.value};$3`);
     } else {
-      const noStyleReg = /(<p[\s|\s]*)(>[\s|\S]*)/;
+      const noStyleReg = /(<(p|h2|h3)[\s|\s]*)(>[\s|\S]*)/;
       blockStr = item.replace(
         noStyleReg,
-        `$1 style="${stylesKey[key]}:${e.value};"$2`
+        `$1 style="${stylesKey[key]}:${e.value};"$3`
       );
     }
     return blockStr;
   }
   spanStyleChange(item: string, key: string, e: any) {
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/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'
+        '$1<span style="font-size:14px;">$3</span>$4'
       );
     }
     const hasStyles = item.indexOf(stylesKey[key]);
@@ -134,7 +134,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
 
   addCompValueTags(key: string, e: any) {
     const compValue = this.store.currComp.value;
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
     if (!blocks) {
       return;
@@ -147,7 +147,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       }
       const spanStr = item.replace(
         pTagReg,
-        '$1<span style="font-size:14px;">$2</span>$3'
+        '$1<span style="font-size:14px;">$3</span>$4'
       );
       blocks[index] = this.formatSortTags(spanStr, key, e);
     });

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

@@ -756,14 +756,15 @@ export const editActions = EditorModule.action({
     // );
   },
   //横向对齐
-  setAlignX(flag: 0 | 1 | 2 | 3) {
+  setAlignX(flag: 0 | 1 | 2 | 3, isGroup =false) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
     const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
 
-    if (this.store.selected.length == 1) {
+    if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
+      
       switch (flag) {
         case 0:
           selectCtrl.translate(-box.left, 0);
@@ -778,6 +779,7 @@ export const editActions = EditorModule.action({
       return;
     }
 
+    //多选元素对齐模式
     const anchorBox = this.helper.findComp(this.store.lastSelected);
     if (!anchorBox) return;
 
@@ -848,9 +850,9 @@ export const editActions = EditorModule.action({
     selectCtrl.upgateGizmoStyle();
   },
 
-  setAlignY(flag: 0 | 1 | 2 | 3) {
+  setAlignY(flag: 0 | 1 | 2 | 3, isGroup = false) {
     const selectCtrl = this.controls.selectCtrl;
-    if (this.store.selected.length == 1) {
+    if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
 

src/modules/editor/objects/Toolbars/default.ts

@@ -14,7 +14,7 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 export class ToolbarItem {
   component: any;
   getValue?: (c: DesignComp) => any;
-  onClick: (this: EditorModule, c: DesignComp) => void;
+  onClick: (this: EditorModule, c: DesignComp, other?:any) => void;
   getVisible!: typeof getVisible;
 
   constructor(data: ItemParams) {

src/modules/editor/objects/Toolbars/layout.ts

@@ -6,23 +6,23 @@ export const LayoutToolbars = createToolbars({
     xLeft: {
         component: TipIcons.AlignXLeft,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(0);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(0, isGroup);
         },
     },
     xCenter: {
         component: TipIcons.AlignXCenter,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(1);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(1, isGroup);
         },
     },
     xRight: {
         component: TipIcons.AlignXRight,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(2);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(2, isGroup);
         },
     },
     xBetween: {
@@ -37,8 +37,8 @@ export const LayoutToolbars = createToolbars({
     yBetween: {
         component: TipIcons.AlignYBetween,
         getVisible(comp) { return this.store.selected.length > 2 },
-        onClick(comp) {
-            this.actions.setAlignY(3);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(3, isGroup);
         },
     },
 
@@ -46,23 +46,23 @@ export const LayoutToolbars = createToolbars({
         component: TipIcons.AlignYTop,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(0);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(0, isGroup);
         },
     },
     YCenter: {
         component: TipIcons.AlignYCenter,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(1);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(1, isGroup);
         },
     },
     YBottom: {
         component: TipIcons.AlignYBottom,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(2);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(2, isGroup);
         },
     },
 

src/modules/editor/objects/Toolbars/liveTools.ts

@@ -23,3 +23,18 @@ export const CompAlignTools = {
     LayoutToolbars.YBottom,
   ] as ToolbarItem[],
 };
+
+export const SelItemsAlignTools = {
+  Left: [
+    LayoutToolbars.xLeft,
+    LayoutToolbars.xCenter,
+    LayoutToolbars.xRight,
+    LayoutToolbars.xBetween,
+  ] as ToolbarItem[],
+  right: [
+    LayoutToolbars.YTop,
+    LayoutToolbars.YCenter,
+    LayoutToolbars.YBottom,
+    LayoutToolbars.yBetween,
+  ] as ToolbarItem[],
+};