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

src/assets/icons/components/IconRelateLocked.tsx

@@ -0,0 +1,16 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconRelateLocked = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-106 -220)">
+        <g transform="translate(123.435 234.481) rotate(180)">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
+                d="M-189.919,68.962h-2.6A3.491,3.491,0,0,1-196,65.481h0A3.491,3.491,0,0,1-192.519,62h2.6"
+                transform="translate(194 -62)" />
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
+                d="M-196,68.962h2.6a3.491,3.491,0,0,0,3.481-3.481h0A3.491,3.491,0,0,0-193.4,62H-196"
+                transform="translate(204.354 -62)" />
+        </g>
+        <path stroke="currentColor" stroke-linecap="round" d="M2790.376,4508h6"
+            transform="translate(-2676.159 -4277)" />
+    </g>
+</svg>)

src/assets/icons/components/IconTextLink.tsx

@@ -1,3 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextLink = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1075.875 284.886) rotate(-45)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943" transform="translate(0 0)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0" transform="translate(12.286 0)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)"/></g></svg>)
+export const IconTextLink = createIcon(<svg viewBox="0 0 34 34">
+    <g transform="translate(-1070 -264)">
+        <rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)" />
+        <g transform="translate(1075.875 284.886) rotate(-45)">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+                stroke-miterlimit="10"
+                d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943"
+                transform="translate(0 0)" />
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+                stroke-miterlimit="10"
+                d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0"
+                transform="translate(12.286 0)" />
+        </g>
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+            d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)" />
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -43,6 +43,7 @@ export * from "./components/IconPreview";
 export * from "./components/IconProfile";
 export * from "./components/IconQueen";
 export * from "./components/IconRelate";
+export * from "./components/IconRelateLocked";
 export * from "./components/IconResizeY";
 export * from "./components/IconRight";
 export * from "./components/IconRotate";

src/assets/icons/svg/relateLocked.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-106 -220)">
+        <g transform="translate(123.435 234.481) rotate(180)">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
+                d="M-189.919,68.962h-2.6A3.491,3.491,0,0,1-196,65.481h0A3.491,3.491,0,0,1-192.519,62h2.6"
+                transform="translate(194 -62)" />
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
+                d="M-196,68.962h2.6a3.491,3.491,0,0,0,3.481-3.481h0A3.491,3.491,0,0,0-193.4,62H-196"
+                transform="translate(204.354 -62)" />
+        </g>
+        <path stroke="currentColor" stroke-linecap="round" d="M2790.376,4508h6"
+            transform="translate(-2676.159 -4277)" />
+    </g>
+</svg>

src/assets/icons/svg/textLink.svg

@@ -1 +1,17 @@
-<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1075.875 284.886) rotate(-45)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943" transform="translate(0 0)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0" transform="translate(12.286 0)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)"/></g></svg>
+<svg viewBox="0 0 34 34">
+    <g transform="translate(-1070 -264)">
+        <rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)" />
+        <g transform="translate(1075.875 284.886) rotate(-45)">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+                stroke-miterlimit="10"
+                d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943"
+                transform="translate(0 0)" />
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+                stroke-miterlimit="10"
+                d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0"
+                transform="translate(12.286 0)" />
+        </g>
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px"
+            d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)" />
+    </g>
+</svg>

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

@@ -454,7 +454,6 @@ export const TextToolItem = defineComponent({
       }
       const command = editor.commands.get(column?.dataIndex);
       if (command) {
-        console.log("init", column?.dataIndex, command.value);
         state.value = command.value;
         command.on("change:value", handleValueChange);
       }

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

@@ -27,6 +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);
         return;
       }
       editor = toRaw(editor);

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

@@ -12,7 +12,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, actions } = useEditor();
+    const { store, actions, controls } = useEditor();
 
     const state = reactive({
       editableId: "",
@@ -45,6 +45,7 @@ export const Component = defineComponent({
             key={state.editableId}
             onLost={() => {
               state.editableId = "";
+              controls.textEditorCtrl.setCurrEditor(null);
             }}
           />
         ) : (
@@ -117,7 +118,9 @@ const EditorComp = defineComponent({
       do {
         if (
           curr.id == "text_toolform" ||
-          curr.classList.contains("editor_text_color")
+          curr.id == "toolbar" ||
+          curr.classList.contains("editor_text_color") ||
+          curr.classList.contains("ant-modal-input")
         ) {
           out.in = true;
           out.stop = false;

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

@@ -10,39 +10,34 @@ export default defineComponent({
     value: string(),
   },
   setup(props) {
-
     const editor = useEditor();
     const comp = editor.helper.findComp(props.value as string) as DesignComp;
     console.log("align id=>", props.value, comp);
     return () => {
       return (
         <div class={AlignToolsStyle}>
-            <div class="row">
-            {
-                CompAlignTools.Left.map((item) => {
-                    return item.getVisible.call(editor, comp) ? (
-                      <item.component
-                        class="p-4px"
-                        value={item.getValue?.(comp)}
-                        onClick={() => item.onClick.call(editor, comp)}
-                      />
-                    ) : null;
-                  })
-            }
-            </div>
-            <div class="row ml-10px">
-            {
-                CompAlignTools.right.map((item) => {
-                    return item.getVisible.call(editor, comp) ? (
-                      <item.component
-                        class="p-4px"
-                        value={item.getValue?.(comp)}
-                        onClick={() => item.onClick.call(editor, comp)}
-                      />
-                    ) : null;
-                  })
-            }
-            </div>
+          <div class="row flex-1 flex">
+            {CompAlignTools.Left.map((item) => {
+              return item.getVisible.call(editor, comp) ? (
+                <item.component
+                  class="p-4px flex-1"
+                  value={item.getValue?.(comp)}
+                  onClick={() => item.onClick.call(editor, comp)}
+                />
+              ) : null;
+            })}
+          </div>
+          <div class="row ml-10px flex-1 flex">
+            {CompAlignTools.right.map((item) => {
+              return item.getVisible.call(editor, comp) ? (
+                <item.component
+                  class="p-4px flex-1"
+                  value={item.getValue?.(comp)}
+                  onClick={() => item.onClick.call(editor, comp)}
+                />
+              ) : null;
+            })}
+          </div>
         </div>
       );
     };

src/modules/editor/components/CompUI/formItems/Size.tsx

@@ -84,12 +84,18 @@ export const Size = defineComponent({
             icon={IconWidth}
             value={fmtVal(0)}
             onChange={(v) => changeVal(0, v)}
-            onIconClick={()=>{ editor.actions.setSameSize(true) }}
-          />
-          <TipIcons.Relate
-            class={[relateIconCls, state.relateRatio && "active"]}
-            onClick={changeRelate}
+            onIconClick={() => {
+              editor.actions.setSameSize(true);
+            }}
           />
+          {state.relateRatio ? (
+            <TipIcons.RelateLocked
+              class={[relateIconCls, "active"]}
+              onClick={changeRelate}
+            />
+          ) : (
+            <TipIcons.Relate class={[relateIconCls]} onClick={changeRelate} />
+          )}
         </div>
         <div class="flex justify-between">
           <SizeInput
@@ -97,7 +103,9 @@ export const Size = defineComponent({
             icon={IconHeight}
             value={fmtVal(1)}
             onChange={(v) => changeVal(1, v)}
-            onIconClick={()=>{ editor.actions.setSameSize(false) }}
+            onIconClick={() => {
+              editor.actions.setSameSize(false);
+            }}
           />
           <Select
             class={selUnitCls}
@@ -120,15 +128,19 @@ const SizeInput = (props: {
   icon: any;
   value: string;
   onChange: AnyFun;
-  onIconClick:AnyFun;
-
+  onIconClick: AnyFun;
 }) => {
   const { label, icon, ...inputProps } = props;
   return (
     <div class={numberInputCls}>
       <span class="pl-14px pr-1px text-14px">{label}</span>
       <InputNumber class="flex-1" bordered={false} {...inputProps} />
-      <icon class="tipIcon" onClick={()=>{ props.onIconClick() }} />
+      <icon
+        class="tipIcon"
+        onClick={() => {
+          props.onIconClick();
+        }}
+      />
     </div>
   );
 };

src/modules/editor/components/TipIcons/index.ts

@@ -27,6 +27,8 @@ import {
   IconHeight,
   IconDelete,
   IconRelate,
+  IconRelateLocked,
+  IconTextLink,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -184,4 +186,12 @@ export const TipIcons = {
     icons: [IconRelate],
     tips: ["锁定宽高比"],
   }),
+  RelateLocked: createTipIcon({
+    icons: [IconRelateLocked],
+    tips: ["解锁宽高比"],
+  }),
+  TextLink: createTipIcon({
+    icons: [FontSize(IconTextLink, 26)],
+    tips: ["链接"],
+  }),
 };

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

@@ -169,7 +169,7 @@ const meatureStyle = css`
   height: 100%;
   left: 0;
   top: 0px;
-  z-index: 999;
+  z-index: 998;
   pointer-events: none;
 
   .ruler {

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

@@ -1,7 +1,15 @@
-import { ModuleControl } from "queenjs";
-import { reactive } from "vue";
+import { ModuleControl, queenApi } from "queenjs";
+import { reactive, toRaw } from "vue";
 import { EditorModule } from "../../module";
-
+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",
+};
 export class TextEditorCtrl extends ModuleControl<EditorModule> {
   state = reactive({
     currEditor: null as any,
@@ -12,4 +20,27 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
   setCurrEditor(editor: any) {
     this.state.currEditor = editor;
   }
+  async setLinkUrl() {
+    const res = await queenApi.showInput({
+      title: "请输入链接地址",
+      defaultValue: "http://",
+    });
+    if (!res || !this.state.currEditor) {
+      return;
+    }
+    const editor = toRaw(this.state.currEditor);
+    editor.execute("link", res);
+  }
+  setCompValueInReg(key: string, e: any) {
+    console.log(key, e);
+    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);
+    }
+  }
 }

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -97,7 +97,10 @@ export function createCompStyle(
   if (layout.transformMatrix) {
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
     m.ty = parseFloat(
-      designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
+      designToNaturalSize(pxToDesignSize(m.ty), {
+        adaptiveH:
+          module.helper.findParentComp(comp.id)?.layout.size[2]?.unit === "%",
+      })
     );
     style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";

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

@@ -11,15 +11,13 @@ export const CompToolbars: ICompToolbars = {
     toolbars.align,
     toolbars.delete,
     toolbars.imageCropper,
+    toolbars.textLink,
   ],
-  
-  Group: [
-    toolbars.cancelGroup,
-    multiSelToolbar.delete,
-  ],
+
+  Group: [toolbars.cancelGroup, multiSelToolbar.delete],
   MultiSelector: [
     multiSelToolbar.delete,
     toolbars.createGroup,
     toolbars.cancelGroup,
   ],
-};
+};

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

@@ -119,7 +119,10 @@ export const toolbars = createToolbars({
   delete: {
     component: TipIcons.Delete,
     getVisible(comp) {
-      return  this.store.selected.length > 1 || (!!comp && this.helper.isCompCanDelete(comp.id));
+      return (
+        this.store.selected.length > 1 ||
+        (!!comp && this.helper.isCompCanDelete(comp.id))
+      );
     },
     onClick(comp) {
       if (this.store.selected.length > 1) {
@@ -129,7 +132,7 @@ export const toolbars = createToolbars({
       this.actions.removeComp(comp.id);
     },
   },
-  
+
   // 对齐
   align: {
     component: TipIcons.Align,
@@ -284,4 +287,14 @@ export const toolbars = createToolbars({
       this.controls.cropCtrl.croppImage(this.store.currComp.id);
     },
   },
+  //文本链接
+  textLink: {
+    component: TipIcons.TextLink,
+    getVisible(comp) {
+      return this.store.currComp.compKey == "Text";
+    },
+    onClick(comp) {
+      this.controls.textEditorCtrl.setLinkUrl();
+    },
+  },
 });

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

@@ -2,23 +2,24 @@ import { ToolbarItem, toolbars } from "./default";
 import { LayoutToolbars } from "./layout";
 
 export const LiveToolbars: ToolbarItem[] = [
-    toolbars.imageCropper,
-    toolbars.layerUp,
-    toolbars.layerDown,
-    toolbars.createGroup,
-    toolbars.cancelGroup,
-    toolbars.delete
-]
+  toolbars.imageCropper,
+  toolbars.layerUp,
+  toolbars.layerDown,
+  toolbars.createGroup,
+  toolbars.cancelGroup,
+  toolbars.delete,
+  toolbars.textLink,
+];
 
-export const CompAlignTools= {
-    Left: [
-        LayoutToolbars.xLeft,
-        LayoutToolbars.xCenter,
-        LayoutToolbars.xRight
-    ] as ToolbarItem[],
-    right: [
-        LayoutToolbars.YTop,
-        LayoutToolbars.YCenter,
-        LayoutToolbars.YBottom
-    ] as ToolbarItem[]
-}
+export const CompAlignTools = {
+  Left: [
+    LayoutToolbars.xLeft,
+    LayoutToolbars.xCenter,
+    LayoutToolbars.xRight,
+  ] as ToolbarItem[],
+  right: [
+    LayoutToolbars.YTop,
+    LayoutToolbars.YCenter,
+    LayoutToolbars.YBottom,
+  ] as ToolbarItem[],
+};