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

src/modules/editor/components/CompUI/basicUI/Polygon/component.tsx

@@ -7,6 +7,8 @@ import { CompUI } from "../..";
 import { values } from "lodash";
 import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
 
+import {editState} from "./toolbar"
+
 function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
    const n = points.length;
    let minv = 100000;
@@ -77,11 +79,11 @@ export const Component = defineComponent({
                 if (points.length < 4) {
                     return;
                 }
-
+                editState.index = 0;
             } else {
                 points.splice(ret.index+1, 0, [x / w, y / h]);
+                editState.index = ret.index + 1;
             }
-
             draw();
         })
 
@@ -124,6 +126,7 @@ export const Component = defineComponent({
                 if (isDragingIndex != -1) {
                     e.preventDefault();
                     e.stopPropagation();
+                    editState.index = isDragingIndex;
 
                     const move =  function (e:MouseEvent){
                         if ( isDragingIndex == -1) return;

src/modules/editor/components/CompUI/basicUI/Polygon/toolbar.tsx

@@ -0,0 +1,123 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { Button, Divider, InputNumber, Select } from "ant-design-vue";
+import { defineComponent, reactive , effect, watch} from "vue";
+import { any, array } from "vue-types";
+
+import ToolbarsUI from "../../formItems/ToolbarsUI";
+import Slider from "../../formItems/Slider";
+import { ToolbarItem } from "@/modules/editor/objects/Toolbars/default";
+import _ from "lodash";
+
+
+
+const PointsComp = defineComponent({
+    props: {
+        value: any<{points: number[][], index: number}>().isRequired
+    },
+    emits: ["change"],
+
+    setup(props, { emit }) {
+        const state = reactive({ index: 0 })
+
+        watch(()=>props.value.index, ()=>{
+            state.index = props.value.index;
+        })
+
+        return () => {
+            const options = props.value.points.map((item, index) => { return { label: "顶点" + (index + 1), value: index } });
+            return (
+                <div class="flex items-center">
+                    <Select class="w-82px" value={state.index} options={options} onChange={v => {
+                        state.index = v as number;
+                    }}>
+                    </Select>
+                    {
+                        props.value.points.length > 0 && <>
+                           <span class="ml-10px">X:</span> <Slider class="w-140px" value={props.value.points[state.index][0]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = props.value.points.slice(0);
+                                ps[state.index][0] = v;
+                                emit("change", ps);
+                            }} />
+
+                            <span  class="ml-10px">Y:</span> <Slider class="w-140px" value={props.value.points[state.index][1]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = props.value.points.slice(0);
+                                ps[state.index][1] = v;
+                                emit("change", ps);
+                            }} />
+                        </>
+                    }
+                </div>
+            )
+        }
+    },
+})
+
+const PolygonToolbar = defineComponent({
+    props: {
+        value: any<{ points: number[][] }>().isRequired,
+    },
+
+    setup(props) {
+        const { actions } = useEditor();
+
+        const toolbarColumns = [
+            {
+                component: () => (
+                    <Divider
+                        type="vertical"
+                        style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
+                    />
+                ),
+            },
+            {
+                dataIndex: "value.points",
+                component: PointsComp,
+                getValue(points:any, data:any) {
+                    return {points, index: data.index};
+                }
+            },
+        ];
+
+        return () => {
+            console.log("prop value------------", props.value);
+
+            return (
+                <div class={[ToolbarStyle, "flex items-center"]}>
+                    <ToolbarsUI
+                        data={props.value}
+                        columns={toolbarColumns}
+                        onChange={(e: { dataIndex: string; value: any }) => {
+                            _.set(props.value, e.dataIndex,e.value);
+                        }}
+                    />
+                </div>
+            );
+        };
+    },
+});
+const ToolbarStyle = css``;
+
+const editState = reactive({
+    value: {},
+    index: 0
+})
+
+const toolbar = new ToolbarItem({
+        component: PolygonToolbar,
+        getVisible: (comp) =>  !!comp && comp.compKey == "Polygon",
+        
+        getValue: (comp)=>{
+                // editState.value = comp.value;
+                effect(()=>{
+                    editState.value = comp.value;
+                })
+                return editState;
+        },
+        onClick(comp) {
+            // this.actions.setCompLayer(comp, -1);
+            console.log("click");
+        },
+});
+
+export {toolbar, editState};

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

@@ -11,7 +11,7 @@ export interface ColumnItem {
   setterIndex?: string;
   props?: { [name: string]: any };
   itemProps?: { [name: string]: any };
-  getValue?: (v: any) => any;
+  getValue?: (v: any, data?:any) => any;
   isDisable?: (value: any, data: any) => boolean;
   isLoading?: (value: any, data: any) => boolean;
   isVisible?: (value: any, data: any) => boolean;
@@ -85,7 +85,7 @@ export const renderFormItem = (props: {
     const { data, column } = props;
     if (!column.dataIndex) return;
     const itemValue = _.get(data, column.dataIndex);
-    return column.getValue ? column.getValue(itemValue) : itemValue;
+    return column.getValue ? column.getValue(itemValue, data) : itemValue;
   });
 
   const changeVal = (value: any, ...args: any[]) => {

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

@@ -20,6 +20,7 @@ import {
   IconCamera,
   IconCube,
   IconDelete,
+  IconEdit,
   IconEyeOff,
   IconEyeOn,
   IconLock,
@@ -46,6 +47,11 @@ export const TipIcons = {
     icons: [IconAlignL, IconAlignC, IconAlignR],
     tips: ["左对齐", "居中", "右对齐"],
   }),
+  Edit: createTipIcon({
+    icons: [IconEdit],
+    tips: ["编辑"],
+  }),
+  
   Position: createTipIcon({
     icons: [IconFloatOff, IconFloatOn],
     tips: ["开启浮动", "关闭浮动"],

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

@@ -4,7 +4,7 @@ import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
 
-import { TopToolbars } from "@/modules/editor/objects/Toolbars/topToolbars";
+import { TopToolbarsLeft, TopToolbarsRight } from "@/modules/editor/objects/Toolbars/topToolbars";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 export default defineUI({
@@ -15,13 +15,16 @@ export default defineUI({
     
     return () => {
       const comp = helper.findComp(store.selected[0])
-      const tools = comp ? TopToolbars.filter(t => t.getVisible.call(editor, comp)) : [];
+      const toolsLeft = comp ? TopToolbarsLeft.filter(t => t.getVisible.call(editor, comp)) : [];
+      const toolsRight = comp ? TopToolbarsRight.filter(t => t.getVisible.call(editor, comp)) : [];
+
       return (
         <div>
           {
-            <div class={"p-10px h-50px flex items-center"}>
+            <div class={"p-10px h-50px flex items-center justify-between"}>
+              <div class="flex-grow flex items-center">
               {
-                tools.map((item) => {
+                toolsLeft.map((item) => {
                   return (
                     <item.component
                       class="p-4px"
@@ -31,6 +34,20 @@ export default defineUI({
                   );
                 })
               }
+              </div>
+              <div class="flex items-center">
+                {
+                   toolsRight.map((item) => {
+                    return (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp as DesignComp)}
+                        onClick={() => item.onClick.call(editor, comp as DesignComp)}
+                      />
+                    );
+                  })
+                }
+              </div>
             </div>
           }
           <div class="absolute right-25px top-80px space-x-10px z-1001">

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

@@ -476,7 +476,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (isClick) {
       this._state = MODE_NONE;
-      this.actions.pickComp(this._downClickedCompId);
+      this._selectObjs(this._downClickedCompId?[this._downClickedCompId]:[], e)
+      // this.actions.pickComp(this._downClickedCompId);
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -487,7 +488,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         this._lastSelRect[0] - box.left,
         this._lastSelRect[1] - box.top,
         this._lastSelRect[2],
-        this._lastSelRect[3]
+        this._lastSelRect[3],
+        e
       );
     }
 
@@ -559,11 +561,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     history.submit();
   }
 
-  rectSelect(x: number, y: number, width: number, height: number) {
+  rectSelect(x: number, y: number, width: number, height: number, e:MouseEvent) {
     const childs =
       this.compMap[this.store.currStreamCardId].children.default || [];
     let n = childs.length;
-    const outs = [];
+    const outs:string[] = [];
     while (n--) {
       const o = new CompObject(this.compMap[childs[n]]);
       if (o.testRect({ x, y, w: width, h: height }, true)) {
@@ -571,8 +573,28 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         outs.push(o.comp.id);
       }
     }
-    this.actions.selectObjs(outs);
-    if (outs.length < 1) {
+    this._selectObjs(outs, e);
+  }
+
+  _selectObjs( outs:string[], e:MouseEvent) {
+
+    let objs = this.store.selected.slice(0);
+    if (e.ctrlKey) {
+      objs.forEach(o=>{
+        if (outs.indexOf(o) == -1) {
+          outs.push(o);
+        }
+      })
+    }
+    let selected = outs;
+    if (e.shiftKey) {//反选
+      selected = [];
+      objs.forEach(o=>{
+         if (outs.indexOf(o) == -1) selected.push(o); 
+      })
+    }
+    this.actions.selectObjs(selected);
+    if (selected.length < 1) {
       this.actions.pickComp(this.store.currStreamCardId);
     }
   }

src/modules/editor/module/stores/index.ts

@@ -22,6 +22,8 @@ export const store = EditorModule.store({
     selected: [] as string[], //选中的组件
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
+    compEditMode: false, //组件编辑模式
+    compEditReslut: 0 // -1 取消， 1 确定 
   }),
   getters: {
     isEditMode(): boolean {

src/modules/editor/objects/Toolbars/text.ts → src/modules/editor/objects/Toolbars/comps.ts

@@ -1,13 +1,12 @@
 import { createToolbars } from "./default";
 import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
 
-export const TextToolbar = createToolbars( {
-    editor: {
+export const Toolbars = createToolbars( {
+    text: {
         component: Toolbar,
         getVisible: (comp) =>  !!comp && comp.compKey == "Text",
         onClick(comp) {
             // this.actions.setCompLayer(comp, -1);
         },
     },
-});
-
+});

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

@@ -13,7 +13,7 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 
 export class ToolbarItem {
   component: any;
-  getValue?: (c: DesignComp) => number;
+  getValue?: (c: DesignComp) => any;
   onClick: (this: EditorModule, c: DesignComp) => void;
   getVisible!: typeof getVisible;
 
@@ -138,6 +138,46 @@ export const toolbars = createToolbars({
       this.actions.setCompPosition(comp);
     },
   },
+   // 编辑模式
+  editor: {
+    component: TipIcons.Edit,
+    getVisible(comp) {
+      return false;// comp.compKey == "Polygon" && !this.store.compEditMode 
+    },
+    onClick(comp) {
+       console.log("clicked edit");
+      // this.actions.setCompPosition(comp);
+      this.store.compEditMode = true;
+      this.store.compEditReslut = -1;
+    },
+  },
+
+  ok: {
+    component: TipIcons.Right,
+    getVisible(comp) {
+  
+      return this.store.compEditMode 
+    },
+    onClick(comp) {
+       console.log("clicked ok ");
+      this.store.compEditReslut = 1;
+      this.store.compEditMode = false;
+    },
+  },
+
+  cancel: {
+    component: TipIcons.Cross,
+    getVisible(comp) {
+      return this.store.compEditMode 
+    },
+    onClick(comp) {
+      console.log("clicked cancel ");
+      // this.actions.setCompPosition(comp);
+      this.store.compEditReslut = -1;
+      this.store.compEditMode = false;
+    },
+  },
+
   // 全屏尺寸
   fullWidth: {
     component: TipIcons.FullWidth,

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

@@ -1,12 +1,21 @@
 import {toolbars, ToolbarItem } from "./default";
-import { TextToolbar } from "./text";
+import { Toolbars } from "./comps";
+import { toolbar } from "../../components/CompUI/basicUI/Polygon/toolbar";
 
-export const TopToolbars: ToolbarItem[] = [
+export const TopToolbarsLeft: ToolbarItem[] = [
 
-    TextToolbar.editor,
+    Toolbars.text,
     toolbars.layerUp,
     toolbars.layerDown,
     toolbars.align,
     toolbars.delete,
     toolbars.imageCropper,
+
+    toolbar,
+]
+
+export const TopToolbarsRight: ToolbarItem[] = [
+    toolbars.editor,
+    toolbars.ok,
+    toolbars.cancel,
 ]