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

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

@@ -30,6 +30,7 @@ import {
 } from "vue";
 import { any, bool, func, number, object, string } from "vue-types";
 import Slider from "../../formItems/Slider";
+import NewColorPicker from "../../formItems/NewColorPicker";
 interface ColumnItem {
   label?: string;
   component?: ((...args: any[]) => any) | Record<string, any>;
@@ -45,8 +46,6 @@ export const TextColor = defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    let pickerRef = ref();
-
     const state = reactive({
       color: props.value,
     });
@@ -56,29 +55,17 @@ export const TextColor = defineComponent({
         state.color = props.value;
       }
     );
-    const colorChange = (e: any) => {
-      const hexa = e.target.value;
-      emit("change", hexa);
-      state.color = hexa;
+    const colorChange = (value: string) => {
+      emit("change", value);
+      state.color = value;
     };
 
     return () => (
-      <div
-        class={ColorPicker}
-        onClick={() => {
-          pickerRef?.value.click();
-        }}
-      >
-        <div class="color_picker" style={{ backgroundColor: state.color }}>
-          <input
-            type="color"
-            class="color_input"
-            ref={pickerRef}
-            value={state.color}
-            onInput={_.debounce(colorChange, 300)}
-          />
-        </div>
-      </div>
+      <NewColorPicker
+        value={state.color}
+        onChange={colorChange}
+        showGradient={false}
+      />
     );
   },
 });
@@ -333,7 +320,6 @@ export const TextStroke = defineComponent({
       }
     );
     const formatVal = (value: any) => {
-      debugger;
       if (!value) {
         state.visible = false;
         state.color = "#666666";
@@ -342,10 +328,20 @@ export const TextStroke = defineComponent({
       }
       state.visible = true;
       const colorReg = /#[a-zA-Z0-9]{6}/g;
-      const color = value.match(colorReg)[0];
+      let color = value.match(colorReg);
+      if (color) {
+        color = color[0];
+      } else {
+        color = "#666666";
+      }
       state.color = color;
       const widthReg = /\d+px/g;
-      const width = value.match(widthReg)[0];
+      let width = value.match(widthReg);
+      if (width) {
+        width = width[0];
+      } else {
+        width = 1;
+      }
       state.width = parseInt(width);
     };
     const colorChange = (v: string) => {
@@ -357,7 +353,7 @@ export const TextStroke = defineComponent({
       state.visible = checked;
       buildValueSub();
     };
-    const widthChange = (e: number) => {
+    const widthChange = (e: any) => {
       state.width = e;
       buildValueSub();
     };
@@ -378,17 +374,22 @@ export const TextStroke = defineComponent({
 
               {state.visible && (
                 <div class={"flex-1 px-20px"}>
-                  <Slider
-                    min={1}
-                    max={5}
-                    value={state.width}
-                    step={1}
-                    onChange={widthChange}
-                  />
+                  <Tooltip title={"描边宽度"} placement="top">
+                    <InputNumber
+                      class={StrokeStyle}
+                      min={1}
+                      max={5}
+                      step={1}
+                      value={state.width}
+                      onChange={widthChange}
+                    />
+                  </Tooltip>
                 </div>
               )}
             </div>
-            <TextColor value={state.color} onChange={colorChange} />
+            <Tooltip title={"描边颜色"} placement="top">
+              <TextColor value={state.color} onChange={colorChange} />
+            </Tooltip>
           </div>
         </div>
       );
@@ -522,32 +523,9 @@ const currStyle = css`
     color: @inf-primary-color;
   }
 `;
-const ColorPicker = css`
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 2px;
-  cursor: pointer;
-  .color_picker {
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-    border: 1px solid transparent;
-    &:focus,
-    &:hover {
-      border-color: @inf-primary-color;
-      box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-    }
-  }
-  .color_input {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 0;
-    padding: 0;
-    border: none;
-    visibility: hidden;
+const StrokeStyle = css`
+  input {
+    height: 28px;
   }
 `;
 

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

@@ -117,9 +117,7 @@ const EditorComp = defineComponent({
       do {
         if (
           curr.id == "text_toolform" ||
-          curr.classList.contains("pcr-app") ||
-          curr.classList.contains("editor_toolbar_drop") ||
-          curr.classList.contains("ant-select-dropdown")
+          curr.classList.contains("editor_text_color")
         ) {
           out.in = true;
           out.stop = false;

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

@@ -30,7 +30,7 @@ export default defineComponent({
                   })
             }
             </div>
-            <div class="row ml-12px">
+            <div class="row ml-10px">
             {
                 CompAlignTools.right.map((item) => {
                     return item.getVisible.call(editor, comp) ? (

src/modules/editor/components/CompUI/formItems/NewColorPicker/index.tsx

@@ -56,6 +56,7 @@ export default defineComponent({
           <Popover
             // visible={true}
             color="#303030"
+            overlayClassName={"editor_text_color"}
             destroyTooltipOnHide
             trigger="click"
             placement="bottomRight"
@@ -83,6 +84,7 @@ export default defineComponent({
             destroyTooltipOnHide
             trigger="click"
             placement="bottomRight"
+            overlayClassName={"editor_text_color"}
             content={
               <Panel
                 showGradient={props.showGradient}

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

@@ -7,6 +7,7 @@ import { AnyFun } from "queenjs/typing";
 import { defineComponent, reactive } from "vue";
 import { any } from "vue-types";
 import { TipIcons } from "../../TipIcons";
+import { useEditor } from "@/modules/editor";
 
 const selectOptions = [
   { value: "px", label: "PX", options: { step: 1 } },
@@ -23,6 +24,7 @@ export const Size = defineComponent({
     const state = reactive({
       relateRatio: 0,
     });
+    const editor = useEditor();
 
     function changeVal(index: number, v: any) {
       const { value } = props;
@@ -82,6 +84,7 @@ 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"]}
@@ -94,6 +97,7 @@ export const Size = defineComponent({
             icon={IconHeight}
             value={fmtVal(1)}
             onChange={(v) => changeVal(1, v)}
+            onIconClick={()=>{ editor.actions.setSameSize(false) }}
           />
           <Select
             class={selUnitCls}
@@ -116,13 +120,15 @@ const SizeInput = (props: {
   icon: any;
   value: string;
   onChange: 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" />
+      <icon class="tipIcon" onClick={()=>{ props.onIconClick() }} />
     </div>
   );
 };
@@ -137,6 +143,7 @@ const numberInputCls = css`
     font-size: 24px;
     padding: 3px 5px;
     background-color: #373737;
+    cursor: pointer;
   }
 `;
 

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

@@ -317,9 +317,10 @@ export const editActions = EditorModule.action({
     const selectCtrl = this.controls.selectCtrl;
     const objc = selectCtrl.objContainer as ObjsContainer;
     if (this.store.selected.length == 1) {
-      this.store.currComp.layout.size[0] = 750;
-      objc.updateSize();
+      if (isWidth) this.store.currComp.layout.size[0] = 750;
+      else this.store.currComp.layout.size[1] = this.store.currStreamCard.layout.size[1];
 
+      objc.updateSize();
       selectCtrl.upgateGizmoStyle();
       return;
     }