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

src/modules/editor/assets/icons/arc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.8" height="19.219" viewBox="0 0 22.8 19.219"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(-716.599 -81.182)"><path class="a" d="M27.6,30.078c0-6-4.835-12.078-10.8-12.078S6,24.074,6,30.078" transform="translate(711.199 69.724)"/><path class="a" d="M16.33,14H10" transform="translate(708.5 70.967)"/><path class="a" d="M34.551,14H28" transform="translate(702.949 70.967)"/><circle class="a" cx="2.932" cy="2.932" r="2.932" transform="translate(725.066 81.782)"/></g></svg>

src/modules/editor/assets/icons/curve.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.287" height="19.391" viewBox="0 0 19.287 19.391"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><path class="a" d="M16488.3,5204s-17.988.152-18.078,18.183" transform="translate(-16469.621 -5203.396)"/></svg>

src/modules/editor/assets/icons/ellicipe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.2" height="21.2" viewBox="0 0 16.2 21.2"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><ellipse class="a" cx="7.5" cy="10" rx="7.5" ry="10" transform="translate(0.6 0.6)"/></svg>

src/modules/editor/assets/icons/line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.697" height="19.697" viewBox="0 0 19.697 19.697"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><line class="a" x1="18" y2="18" transform="translate(0.849 0.849)"/></svg>

src/modules/editor/assets/icons/polygon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.388" height="21.147" viewBox="0 0 19.388 21.147"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><path class="a" d="M14.6,24.078,6.52,19.587A1.01,1.01,0,0,1,6,18.7V9.789a1.01,1.01,0,0,1,.52-.883L14.6,4.415a1.01,1.01,0,0,1,.981,0l8.083,4.491a1.01,1.01,0,0,1,.52.883V18.7a1.01,1.01,0,0,1-.52.883l-8.083,4.491A1.01,1.01,0,0,1,14.6,24.078Z" transform="translate(-5.4 -3.673)"/></svg>

src/modules/editor/assets/icons/rect.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.2" height="19.2" viewBox="0 0 19.2 19.2"><defs><style>.a{fill:rgba(0,0,0,0);stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(0.272 0.272)"><rect class="a" width="18" height="18" rx="1" transform="translate(0.328 0.328)"/></g></svg>

src/modules/editor/assets/icons/triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.899" height="19.322" viewBox="0 0 21.899 19.322"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;fill-rule:evenodd;}</style></defs><path class="a" d="M12.929,6.494a1.007,1.007,0,0,1,1.742,0L24,22.6a1.007,1.007,0,0,1-.871,1.511H4.474A1.007,1.007,0,0,1,3.6,22.6Z" transform="translate(-2.851 -5.392)"/></svg>

src/modules/editor/components/CompUI/basicUI/Arc/index.ts

@@ -9,7 +9,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "圆弧",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/arc.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

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

@@ -0,0 +1,240 @@
+import { defineComponent, onMounted , ref, effect} from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { useEditor } from "../../../..";
+import { View } from "../View";
+import { CompUI } from "../..";
+import { values } from "lodash";
+import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
+
+function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
+   const n = points.length;
+   let minv = 100000;
+    let minIndex = -1;
+    const positions = []
+
+   for(let i=0; i<n; i++) {
+      const p = points[i];
+      const x = w *p[0];
+      const y = h *p[1];
+      positions.push([x, y]);
+
+      const ln = (sx-x)*(sx-x) + (sy-y)*(sy-y);
+      if ( ln < minv ) {
+        minIndex = i;
+        minv = ln;
+         if(!(sx < (x -10) || sx > (x + 10) || sy < (y -10) || sy > (y+10) ) ) {
+            return {clicked: true, index: i};
+         }
+      }
+   }   
+
+   let preIndex = minIndex -1;
+   if (preIndex < 0 ) preIndex = n-1;
+   let afterIndex = minIndex + 1;
+   if ( afterIndex >= n) afterIndex = 0;
+
+   const currV = {x:sx-positions[minIndex][0], y:sy-positions[minIndex][1]};
+   const preV = {x:positions[preIndex][0]-positions[minIndex][0], y:positions[preIndex][1]-positions[minIndex][1]}
+   const afterV = {x:positions[afterIndex][0]-positions[minIndex][0], y:positions[afterIndex][1]-positions[minIndex][1]}
+
+  const a1 =  Angle(currV, preV)
+  const a2 =  Angle(currV, afterV);
+
+  if (a1 < a2) {
+    return {index: preIndex};
+  }
+
+  return {index: minIndex};
+}
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { helper, controls , store} = useEditor();
+    const data = useCompData(props.compId);
+    const canvasRef =  ref<HTMLCanvasElement>();
+    onMounted(()=>{
+        
+        // draw();
+        let isDragingIndex = -1;
+        canvasRef.value?.addEventListener("dblclick", function(e:MouseEvent){
+            
+            const x = helper.pxToDesignSize(e.offsetX )
+            const y = helper.pxToDesignSize(e.offsetY)
+            
+            const points = data.value.points as number[][];
+            const w = data.layout.size[0];
+            const h = data.layout.size[1];
+            //判断直线相交求解点到直线的距离
+            const ret = findNearestPoint(data.value.points, w , h, x, y);
+            //判断是否
+            console.log("dbclick=>xxxxx", ret);
+            if (ret.clicked) {//点击删除
+                points.splice(ret.index, 1);
+                if (points.length < 4) {
+                    return;
+                }
+
+            } else {
+                points.splice(ret.index+1, 0, [x / w, y / h]);
+            }
+
+            draw();
+        })
+
+        canvasRef.value?.addEventListener("mousedown", function(e:MouseEvent){
+                if (store.currCompId != props.compId) return;
+
+                const el = canvasRef.value as HTMLCanvasElement;
+                const x = helper.pxToDesignSize(e.offsetX )
+                const y = helper.pxToDesignSize(e.offsetY)
+                
+                console.log(x , y);
+
+                const points = data.value.points as number[][];
+                const width = data.layout.size[0];
+                const height = data.layout.size[1];
+
+                let n = points.length;
+                isDragingIndex = -1;
+                let initX = 0;
+                let initY = 0;
+
+                while(n--) {
+                    const p = points[n];
+
+                    const px = width * p[0];
+                    const py = height * p[1];
+                    
+                    if(!(x < (px -10) || x > (px + 10) || y < (py -10) || y > (py+10) ) ) {
+                        isDragingIndex = n;
+                        initX = p[0]
+                        initY = p[1]
+                        break;
+                    }
+
+                }
+                
+                const dragingX = x;
+                const dragingY = y;
+
+                if (isDragingIndex != -1) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    const move =  function (e:MouseEvent){
+                        if ( isDragingIndex == -1) return;
+                         
+                        const offx = (helper.pxToDesignSize(e.offsetX ) - dragingX) / width;
+                        const offy = (helper.pxToDesignSize(e.offsetY ) -  dragingY) / height;
+
+                        points[isDragingIndex][0] = initX + offx;
+                        points[isDragingIndex][1] = initY + offy;
+
+                        draw();
+                    }
+
+                    el.addEventListener("mousemove", move)
+
+                    el.addEventListener("mouseup", function(e:MouseEvent){
+                        el.removeEventListener("mousemove", move);
+                    });
+
+                    el.addEventListener("mouseleave", function(e:MouseEvent){
+                        el.removeEventListener("mousemove", move);
+                    })
+
+
+                }
+        }, )
+
+       
+        effect(draw);
+    })
+
+    
+
+   
+    function draw() {
+        const canvas = canvasRef.value as HTMLCanvasElement;
+        if (!canvas) return;
+
+        const ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;
+
+        const width = data.layout.size[0];
+        const height = data.layout.size[1];
+        canvas.width = Math.ceil(Math.max(1, width));
+        canvas.height = Math.ceil(Math.max(1, height));
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.lineWidth = data.value.lineWidth;
+        
+    
+        ctx.strokeStyle = data.value.lineColor;
+    
+        const padding = 0.2;
+
+        ctx.lineJoin = "round";
+        ctx.beginPath();
+       
+
+        let points = data.value.points as number[][];
+        if (data.value.points.length == 0) {
+            data.value.points = [[padding, 0.5, 0.4, 0.1], [1 - padding, 0.5, 0.4, 0.1]];
+            points = data.value.points;
+        }
+
+        points.forEach((p, index)=>{
+            const x = width * p[0];
+            const y = height * p[1];
+            if (index == 0) {
+                ctx.moveTo(x, y)
+            } else {
+                const preIndex = index -1;
+                const prep = points[preIndex];
+                if (prep[2] != undefined) {
+                    ctx.quadraticCurveTo( width *prep[2], height *prep[3],  x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+        })
+
+        if (data.value.isClose) {
+            ctx.closePath();
+        }
+
+        if (data.value.lineWidth !== 0) {
+            ctx.stroke();
+        }
+
+        if (data.value.isFill)    {
+            let bColor = data.value.fillColor;
+            if (!bColor) bColor = data.value.lineColor;
+            ctx.fillStyle = bColor;
+            ctx.fill();
+        }
+
+        points.forEach((p, index)=>{
+            const x = width * p[0];
+            const y = height * p[1];
+
+            if (store.isEditMode  && store.currCompId == props.compId) {
+                ctx.fillStyle = "red"
+
+                ctx.beginPath();
+                ctx.arc(x, y, 5,  0, Math.PI*2);
+                ctx.fill();
+            }
+        })
+    }
+
+    return () => (
+      <View compId={props.compId}>
+         <canvas ref={canvasRef} style={{width:"100%", height: "100%"}}> </canvas>
+      </View>
+    );
+  },
+});

src/modules/editor/components/CompUI/basicUI/Curve/index.ts

@@ -0,0 +1,61 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createCompHooks } from "../../defines/createCompHooks";
+import { InputNumber, Switch } from "ant-design-vue";
+import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+
+export { Component } from "./component";
+
+export const options = {
+  name: "连续曲线",
+  thumbnail: require("@/modules/editor/assets/icons/curve.svg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
+  value: {
+    lineColor: "black",
+    lineWidth: 1,
+    isFill: false,
+    fillColor: "black",
+    points: [],
+    isClose: true,
+    isCurve: false,
+  },
+  layout: {
+    size: [750, 750],
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "线宽",
+    dataIndex: "value.lineWidth",
+    component: InputNumber,
+  },
+  {
+    label:"颜色",
+    dataIndex: "value.lineColor",
+    ...createColorOpts(),
+  },
+  {
+    label: "是否填充",
+    dataIndex: "value.isFill",
+    component: "Switch",
+  },
+  {
+    label:"填充颜色",
+    dataIndex: "value.fillColor",
+    ...createColorOpts(),
+    isVisible: (value, data) => data?.value?.isFill == true,
+  },
+  {
+    label: "是否封闭",
+    dataIndex: "value.isClose",
+    component: "Switch",
+  },
+  {
+    label: "是否支持曲线",
+    dataIndex: "value.isCurve",
+    component: "Switch",
+  }
+]);

src/modules/editor/components/CompUI/basicUI/Ellipse/index.ts

@@ -9,7 +9,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "椭圆",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/ellicipe.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

src/modules/editor/components/CompUI/basicUI/Line/index.ts

@@ -8,7 +8,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "直线",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/line.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

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

@@ -5,6 +5,48 @@ import { useEditor } from "../../../..";
 import { View } from "../View";
 import { CompUI } from "../..";
 import { values } from "lodash";
+import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
+
+function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
+   const n = points.length;
+   let minv = 100000;
+    let minIndex = -1;
+    const positions = []
+
+   for(let i=0; i<n; i++) {
+      const p = points[i];
+      const x = w *p[0];
+      const y = h *p[1];
+      positions.push([x, y]);
+
+      const ln = (sx-x)*(sx-x) + (sy-y)*(sy-y);
+      if ( ln < minv ) {
+        minIndex = i;
+        minv = ln;
+         if(!(sx < (x -10) || sx > (x + 10) || sy < (y -10) || sy > (y+10) ) ) {
+            return {clicked: true, index: i};
+         }
+      }
+   }   
+
+   let preIndex = minIndex -1;
+   if (preIndex < 0 ) preIndex = n-1;
+   let afterIndex = minIndex + 1;
+   if ( afterIndex >= n) afterIndex = 0;
+
+   const currV = {x:sx-positions[minIndex][0], y:sy-positions[minIndex][1]};
+   const preV = {x:positions[preIndex][0]-positions[minIndex][0], y:positions[preIndex][1]-positions[minIndex][1]}
+   const afterV = {x:positions[afterIndex][0]-positions[minIndex][0], y:positions[afterIndex][1]-positions[minIndex][1]}
+
+  const a1 =  Angle(currV, preV)
+  const a2 =  Angle(currV, afterV);
+
+  if (a1 < a2) {
+    return {index: preIndex};
+  }
+
+  return {index: minIndex};
+}
 
 export const Component = defineComponent({
   props: {
@@ -14,24 +56,33 @@ export const Component = defineComponent({
     const { helper, controls , store} = useEditor();
     const data = useCompData(props.compId);
     const canvasRef =  ref<HTMLCanvasElement>();
-
-  
-
     onMounted(()=>{
         
         // draw();
         let isDragingIndex = -1;
-
         canvasRef.value?.addEventListener("dblclick", function(e:MouseEvent){
             
             const x = helper.pxToDesignSize(e.offsetX )
             const y = helper.pxToDesignSize(e.offsetY)
-            console.log("dbclick=>xxxxx", x, y);
-
-            //判断直线相交求解点到直线的距离
             
+            const points = data.value.points as number[][];
+            const w = data.layout.size[0];
+            const h = data.layout.size[1];
+            //判断直线相交求解点到直线的距离
+            const ret = findNearestPoint(data.value.points, w , h, x, y);
             //判断是否
+            console.log("dbclick=>xxxxx", ret);
+            if (ret.clicked) {//点击删除
+                points.splice(ret.index, 1);
+                if (points.length < 4) {
+                    return;
+                }
 
+            } else {
+                points.splice(ret.index+1, 0, [x / w, y / h]);
+            }
+
+            draw();
         })
 
         canvasRef.value?.addEventListener("mousedown", function(e:MouseEvent){
@@ -139,10 +190,6 @@ export const Component = defineComponent({
             const x = width * p[0];
             const y = height * p[1];
             index == 0 ?  ctx.moveTo(x, y) :  ctx.lineTo(x, y);
-            if (store.isEditMode) {
-                ctx.fillStyle = "red"
-                ctx.fillRect(x-10, y-10, 20, 20);
-            }
         })
 
         if (data.value.isClose) {
@@ -158,6 +205,19 @@ export const Component = defineComponent({
             ctx.fillStyle = bColor;
             ctx.fill();
         }
+
+        points.forEach((p, index)=>{
+            const x = width * p[0];
+            const y = height * p[1];
+
+            if (store.isEditMode  && store.currCompId == props.compId) {
+                ctx.fillStyle = "red"
+
+                ctx.beginPath();
+                ctx.arc(x, y, 5,  0, Math.PI*2);
+                ctx.fill();
+            }
+        })
     }
 
     return () => (

src/modules/editor/components/CompUI/basicUI/Polygon/index.ts

@@ -8,7 +8,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "多边形",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/polygon.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

src/modules/editor/components/CompUI/basicUI/Rectage/index.ts

@@ -8,7 +8,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "四边形",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/rect.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

src/modules/editor/components/CompUI/basicUI/Triangle/index.ts

@@ -8,7 +8,7 @@ export { Component } from "./component";
 
 export const options = {
   name: "三角形",
-  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+  thumbnail: require("@/modules/editor/assets/icons/triangle.svg"),
 };
 
 export const { createComp, useCompData } = createCompHooks({

src/modules/editor/components/CompUI/basicUI/index.ts

@@ -10,6 +10,6 @@ export * as Line from "./Line";
 export * as Arc from "./Arc";
 export * as Ellipse from "./Ellipse";
 export * as Triangle from "./Triangle";
-export * as QuadraticCurve from "./QuadraticCurve";
 export * as Polygon from "./Polygon";
-export * as Map from "./Map";
+export * as Curve from "./Curve";
+export * as Map from "./Map";

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

@@ -13,20 +13,9 @@ export default defineComponent({
 
     const state = useReactive(() => ({
       basicComps() {
-        return [
-          "Text",
-          "Image",
-          "Video",
-          "Web3D",
-          "Rectage",
-          "Line",
-          "Arc",
-          "Ellipse",
-          "Triangle",
-          "QuadraticCurve",
-          "Polygon",
-          // "Map",
-        ].map((key) => compUICtrl.state.components.get(key) as any);
+        return ["Text", "Image", "Video", "Web3D",  "Line", "Arc", "Ellipse", "Triangle", "Rectage", "Polygon"].map(
+          (key) => compUICtrl.state.components.get(key) as any
+        );
       },
     }));
 

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

@@ -3,12 +3,13 @@ import { computed, reactive } from "vue";
 
 import { IconImage, IconShape, IconTpl, IconVideo } from "@/assets/icons";
 import { css, cx } from "@linaria/core";
-import { IconCube } from "@queenjs/icons";
+import { IconCube, IconLayers } from "@queenjs/icons";
 import { defineUI } from "queenjs";
 import CustomComps from "./CustomComps";
 import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
+import { CompTree } from "../SliderRight/CompTree";
 
 const tabs = [
   {
@@ -69,6 +70,11 @@ const tabs = [
     icon: IconTpl,
     component: Templates,
   },
+  {
+    title: "图层",
+    icon: () => <IconLayers class="text-24px transform scale-170" />,
+    component: CompTree,
+  },
 ];
 
 export default defineUI({
@@ -93,21 +99,24 @@ export default defineUI({
 
       return (
         <div class="h-full flex">
-          <div class="w-70px pt-16px border-right !border-2px">
+          <div class="flex flex-col w-70px py-16px border-right !border-2px">
             {tabs.map((record, index) => {
               return (
-                <div
-                  key={index}
-                  class={cx(
-                    tabItem,
-                    "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
-                    state.tabIndex == index && "active"
-                  )}
-                  onClick={() => (state.tabIndex = index)}
-                >
-                  <record.icon class="text-24px" />
-                  <div class="text-center mt-2px">{record.title}</div>
-                </div>
+                <>
+                  {index === tabs.length - 1 && <div class="flex-1"></div>}
+                  <div
+                    key={index}
+                    class={cx(
+                      tabItem,
+                      "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
+                      state.tabIndex == index && "active"
+                    )}
+                    onClick={() => (state.tabIndex = index)}
+                  >
+                    <record.icon class="text-24px" />
+                    <div class="text-center mt-2px">{record.title}</div>
+                  </div>
+                </>
               );
             })}
           </div>
@@ -131,7 +140,7 @@ export default defineUI({
             )}
 
             <currComp.component
-              class="flex-1 h-1/1 px-16px my-10px overflow-y-auto"
+              class="flex-1 h-1/1 px-16px !my-10px overflow-y-auto"
               {...currComp.props}
             />
           </div>

src/modules/editor/components/Viewport/Slider/SliderRight/index.tsx

@@ -19,10 +19,10 @@ export default defineUI({
           <div class="flex-1 p-16px scrollbar">
             <Form component={currComp} />
           </div>
-          <div class="p-16px border-bottom !border-2px border-top">组件树</div>
+          {/* <div class="p-16px border-bottom !border-2px border-top">组件树</div>
           <div class="h-360px py-20px pr-20px scrollbar">
             <CompTree class={compTreeCls} />
-          </div>
+          </div> */}
         </div>
       );
     };

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

@@ -51,8 +51,9 @@ export const editActions = EditorModule.action({
       compKey != "Arc" && 
       compKey != "Triangle" &&
       compKey != "Ellipse" && 
-      compKey != "QuadraticCurve" &&
-      compKey != "Polygon"
+      compKey != "Polygon" &&
+      compKey != "Curve"
+
 
     let yOffset = 0;
     if (