新增两个动画效果

jhongwei80 · Dec 11, 2021 · a59e7d0 · a59e7d0
1 parent 8e94aa0
commit a59e7d0
Show file tree

Hide file tree

Showing 9 changed files with 3,574 additions and 2,059 deletions.
diff --git a/README.md b/README.md
@@ -245,7 +245,9 @@ Vue.use(Fragment.Plugin)
 
 ![修改组件属性](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114045_%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.gif)
 
-![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114050_%E9%A2%84%E8%A7%88.gif)
+![](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211080131_%E5%8A%A8%E7%94%BB%E7%BB%98%E5%88%B6.gif)
+
+![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211075750_%E7%94%B5%E5%8A%9B%E9%A2%84%E8%A7%88.gif)
 
 ## License
 

diff --git a/public/InterfaceReturn.json b/public/InterfaceReturn.json
@@ -426,7 +426,7 @@
     "type": "ConnLineSvg",
     "title": "连接线",
     "panel_class": "draw",
-    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"prop_data.extend_attr.endpoint_y.val\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\"></line>",
+    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"prop_data.extend_attr.endpoint_y.val\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
     "props": [
       "prop_data"
     ],
@@ -455,6 +455,31 @@
         "title": "终点y相对坐标",
         "val": 0,
         "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "电流效果",
+        "val": {
+          "selectval": "",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
       }
     },
     "create_type": "draw",
@@ -464,7 +489,7 @@
     "type": "ConnHorizontalLineSvg",
     "title": "连接线-横线",
     "panel_class": "draw",
-    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" y1=\"0\" :x2=\"prop_data.extend_attr.endpoint_x.val\" y2=\"0\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\"></line>",
+    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" y1=\"0\" :x2=\"prop_data.extend_attr.endpoint_x.val\" y2=\"0\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
     "props": [
       "prop_data"
     ],
@@ -483,6 +508,31 @@
         "title": "终点x相对坐标",
         "val": 0,
         "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "电流效果",
+        "val": {
+          "selectval": "",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
       }
     },
     "create_type": "click",
@@ -492,7 +542,7 @@
     "type": "ConnVerticalLineSvg",
     "title": "连接线-竖线",
     "panel_class": "draw",
-    "template": "<line x1=\"0\" :y1=\"prop_data.extend_attr.startpoint_y.val\" x2=\"0\" :y2=\"prop_data.extend_attr.endpoint_y.val\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\"></line>",
+    "template": "<line x1=\"0\" :y1=\"prop_data.extend_attr.startpoint_y.val\" x2=\"0\" :y2=\"prop_data.extend_attr.endpoint_y.val\" :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\"  stroke-width=\"2\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
     "props": [
       "prop_data"
     ],
@@ -511,6 +561,31 @@
         "title": "终点y相对坐标",
         "val": 0,
         "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "电流效果",
+        "val": {
+          "selectval": "",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
       }
     },
     "create_type": "click",
@@ -568,6 +643,260 @@
       }
     },
     "create_type": "draggable",
-    "priview_img": "https://svg.yaolm.top/test.png"
+    "priview_img": "http://svg.yaolm.top/test.png"
+  },
+  {
+    "type": "PipelineSvg",
+    "title": "管道",
+    "panel_class": "draw",
+    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"prop_data.extend_attr.endpoint_y.val\"  :stroke=\"prop_data.extend_attr.o_color.val\" :stroke-width=\"prop_data.extend_attr.o_width.val\"></line><line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"prop_data.extend_attr.endpoint_y.val\"  :stroke=\"prop_data.extend_attr.i_color.val\" :stroke-width=\"prop_data.extend_attr.i_width.val\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "extend_attr": {
+      "o_color": {
+        "title": "管道颜色",
+        "val": "#0a7ae2",
+        "type": "colorinputbox"
+      },
+      "i_color": {
+        "title": "水流颜色",
+        "val": "#119bfa",
+        "type": "colorinputbox"
+      },
+      "startpoint_x": {
+        "title": "起点x相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "startpoint_y": {
+        "title": "起点y相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "endpoint_x": {
+        "title": "终点x相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "endpoint_y": {
+        "title": "终点y相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "o_width": {
+        "title": "管道宽度",
+        "val": 10,
+        "type": "numberinputbox"
+      },
+      "i_width": {
+        "title": "水流宽度",
+        "val": 5,
+        "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "水流效果",
+        "val": {
+          "selectval": "svg_ani_flow",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
+      }
+    },
+    "create_type": "draw",
+    "priview_img": "/Pipeline_V_Svg.png"
+  },
+  {
+    "type": "Pipeline_H_Svg",
+    "title": "管道-横向",
+    "panel_class": "draw",
+    "template": "<line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"0\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"0\"  :stroke=\"prop_data.extend_attr.o_color.val\" :stroke-width=\"prop_data.extend_attr.o_width.val\"></line><line :x1=\"prop_data.extend_attr.startpoint_x.val\" :y1=\"0\" :x2=\"prop_data.extend_attr.endpoint_x.val\" :y2=\"0\"  :stroke=\"prop_data.extend_attr.i_color.val\" :stroke-width=\"prop_data.extend_attr.i_width.val\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "extend_attr": {
+      "o_color": {
+        "title": "管道颜色",
+        "val": "#0a7ae2",
+        "type": "colorinputbox"
+      },
+      "i_color": {
+        "title": "水流颜色",
+        "val": "#119bfa",
+        "type": "colorinputbox"
+      },
+      "startpoint_x": {
+        "title": "起点x相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "endpoint_x": {
+        "title": "终点x相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "o_width": {
+        "title": "管道宽度",
+        "val": 10,
+        "type": "numberinputbox"
+      },
+      "i_width": {
+        "title": "水流宽度",
+        "val": 5,
+        "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "水流效果",
+        "val": {
+          "selectval": "svg_ani_flow",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
+      }
+    },
+    "create_type": "draw",
+    "priview_img": "/Pipeline_H_Svg.png"
+  },
+  {
+    "type": "Pipeline_V_Svg",
+    "title": "管道-纵向",
+    "panel_class": "draw",
+    "template": "<line :x1=\"0\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"0\" :y2=\"prop_data.extend_attr.endpoint_y.val\"  :stroke=\"prop_data.extend_attr.o_color.val\" :stroke-width=\"prop_data.extend_attr.o_width.val\"></line><line :x1=\"0\" :y1=\"prop_data.extend_attr.startpoint_y.val\" :x2=\"0\" :y2=\"prop_data.extend_attr.endpoint_y.val\"  :stroke=\"prop_data.extend_attr.i_color.val\" :stroke-width=\"prop_data.extend_attr.i_width.val\" :class=\"prop_data.extend_attr.svg_line_ani.val.selectval\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "extend_attr": {
+      "o_color": {
+        "title": "管道颜色",
+        "val": "#0a7ae2",
+        "type": "colorinputbox"
+      },
+      "i_color": {
+        "title": "水流颜色",
+        "val": "#119bfa",
+        "type": "colorinputbox"
+      },
+      "startpoint_y": {
+        "title": "起点y相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "endpoint_y": {
+        "title": "终点y相对坐标",
+        "val": 0,
+        "type": "numberinputbox"
+      },
+      "o_width": {
+        "title": "管道宽度",
+        "val": 10,
+        "type": "numberinputbox"
+      },
+      "i_width": {
+        "title": "水流宽度",
+        "val": 5,
+        "type": "numberinputbox"
+      },
+      "svg_line_ani": {
+        "title": "水流效果",
+        "val": {
+          "selectval": "svg_ani_flow",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_flow",
+              "label": "正向"
+            },
+            {
+              "value": "svg_ani_flow_back",
+              "label": "反向"
+            },
+            {
+              "value": "svg_ani_flow_stop",
+              "label": "停止"
+            }
+          ]
+        },
+        "type": "select"
+      }
+    },
+    "create_type": "draw",
+    "priview_img": "/Pipeline_V_Svg.png"
+  },
+  {
+    "type": "ReservoirSvg",
+    "title": "蓄水池",
+    "panel_class": "common",
+    "template": "<polyline points=\"10,0 0,0 0,65 100,65 100,0 90,0\" :stroke=\"prop_data.extend_attr.color.val\" stroke-width=\"5\"></polyline><rect transform=\"rotate(180,50 65)\" :class=\"prop_data.extend_attr.svg_fill_ani.val.selectval\" x=\"2.5\" y=\"65\" width=\"95\" height=\"40\" :fill=\"prop_data.extend_attr.f_color.val\"></rect>",
+    "props": [
+      "prop_data"
+    ],
+    "extend_attr": {
+      "color": {
+        "title": "边框颜色",
+        "val": "#FFFFFF",
+        "type": "colorinputbox"
+      },
+      "f_color": {
+        "title": "填充颜色",
+        "val": "#37cfe7",
+        "type": "colorinputbox"
+      },
+      "svg_fill_ani": {
+        "title": "填充效果",
+        "val": {
+          "selectval": "svg_ani_fill_h40",
+          "selectgroup": [
+            {
+              "value": "",
+              "label": "无"
+            },
+            {
+              "value": "svg_ani_fill_h40",
+              "label": "正向"
+            }
+          ]
+        },
+        "type": "select"
+      }
+    },
+    "create_type": "draggable",
+    "priview_img": "/ReservoirSvg.png"
   }
 ]
diff --git a/public/Pipeline_H_Svg.png b/public/Pipeline_H_Svg.png
diff --git a/public/Pipeline_V_Svg.png b/public/Pipeline_V_Svg.png
diff --git a/public/ReservoirSvg.png b/public/ReservoirSvg.png