@zgfe/modules-settings 2.0.0-zhongyuan.9 → 2.1.0-zhongyuan-set.1

package/es/components/picCircleSelect/bak/index2.tsx.bak

@@ -1,104 +1,104 @@
-import { Spin } from 'antd';
-import React, { useEffect, useState } from 'react';
-import './index.less';
-// import CanvasSelect from 'canvas-select';
-import CanvasSelect from './canvas-select.min';
-export const classPrefix = 'setting-pic-circle-select';
-const tools =  [
-  {
-    name: 'arrow',
-    text: '添加箭头',
-    icon: 'icon-tianjiajiantou1'
-  },
-  {
-    name: 'text',
-    text: '添加文字',
-    icon: 'icon-tianjiawenzi1'
-  }
-]
-const PageLoading: React.FC = () => {
-  // const [size, setSize] = useState({width: 500, height: 500})
-  // const [currentTool, setSize] = useState({width: 500, height: 500})
-  useEffect(() => {
-    setTimeout(init, 300)
-  })
-
-  const init = () => {
-        // 创建实例（重要：一定要等到挂载节点就绪）
-// 第一个参数为挂载节点 可以是css选择器或者HTMLCanvasElement
-// 第二个参数为图片链接
-// const instance = new CanvasSelect(".img-container", "./images/zg_regist_top.png");
-// or
-const instance = new CanvasSelect('.container');
-instance.setImage('/one.jpg');
-
-let option = [
-  {
-    label: "rectangle",
-    labelFillStyle: "#f00",
-    textFillStyle: "#fff",
-    coor: [
-      [184, 183],
-      [275, 238],
-    ], // required
-    type: 1, // required
-  },
-  {
-    label: "polygon",
-    coor: [
-      [135, 291],
-      [129, 319],
-      [146, 346],
-      [174, 365],
-      [214, 362],
-      [196, 337],
-      [161, 288],
-    ], // required
-    type: 2, // required
-  },
-  {
-    label: "dot",
-    coor: [345, 406], // required
-    type: 3, // required
-  },
-  {
-    label: "line",
-    coor: [
-      [470, 155],
-      [490, 230],
-      [493, 298],
-    ], // required
-    type: 4, // required
-  },
-  {
-    label: "circle",
-    coor: [369, 197], // required
-    radius: 38, // required
-    type: 5, // required
-  },
-];
-// 加载数据
-instance.setData(option);
-// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注，4折线标注，5圆形标注
-instance.createType = 1;
-instance.on("select", (info) => {
-  console.log("select", info);
-  // 可对选中对参数info进行修改
-  // 修改标签：info.label="hello"
-  // 单个形状修改填充颜色：info.fillStyle="#0f0"
-  // 然后调用instance.update()更新视图
-});
-  }
-
-  // const selectTool = (tool) => {
-  //   this.currentTool = tool
-  // }
-  return (
-    <div>
-      <div className="img-container">
-      </div>
-    </div>
-  );
-};
-
-export default PageLoading;
+import { Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import './index.less';
+// import CanvasSelect from 'canvas-select';
+import CanvasSelect from './canvas-select.min';
+export const classPrefix = 'setting-pic-circle-select';
+const tools =  [
+  {
+    name: 'arrow',
+    text: '添加箭头',
+    icon: 'icon-tianjiajiantou1'
+  },
+  {
+    name: 'text',
+    text: '添加文字',
+    icon: 'icon-tianjiawenzi1'
+  }
+]
+const PageLoading: React.FC = () => {
+  // const [size, setSize] = useState({width: 500, height: 500})
+  // const [currentTool, setSize] = useState({width: 500, height: 500})
+  useEffect(() => {
+    setTimeout(init, 300)
+  })
+
+  const init = () => {
+        // 创建实例（重要：一定要等到挂载节点就绪）
+// 第一个参数为挂载节点 可以是css选择器或者HTMLCanvasElement
+// 第二个参数为图片链接
+// const instance = new CanvasSelect(".img-container", "./images/zg_regist_top.png");
+// or
+const instance = new CanvasSelect('.container');
+instance.setImage('/one.jpg');
+
+let option = [
+  {
+    label: "rectangle",
+    labelFillStyle: "#f00",
+    textFillStyle: "#fff",
+    coor: [
+      [184, 183],
+      [275, 238],
+    ], // required
+    type: 1, // required
+  },
+  {
+    label: "polygon",
+    coor: [
+      [135, 291],
+      [129, 319],
+      [146, 346],
+      [174, 365],
+      [214, 362],
+      [196, 337],
+      [161, 288],
+    ], // required
+    type: 2, // required
+  },
+  {
+    label: "dot",
+    coor: [345, 406], // required
+    type: 3, // required
+  },
+  {
+    label: "line",
+    coor: [
+      [470, 155],
+      [490, 230],
+      [493, 298],
+    ], // required
+    type: 4, // required
+  },
+  {
+    label: "circle",
+    coor: [369, 197], // required
+    radius: 38, // required
+    type: 5, // required
+  },
+];
+// 加载数据
+instance.setData(option);
+// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注，4折线标注，5圆形标注
+instance.createType = 1;
+instance.on("select", (info) => {
+  console.log("select", info);
+  // 可对选中对参数info进行修改
+  // 修改标签：info.label="hello"
+  // 单个形状修改填充颜色：info.fillStyle="#0f0"
+  // 然后调用instance.update()更新视图
+});
+  }
+
+  // const selectTool = (tool) => {
+  //   this.currentTool = tool
+  // }
+  return (
+    <div>
+      <div className="img-container">
+      </div>
+    </div>
+  );
+};
+
+export default PageLoading;

package/es/components/picCircleSelect/index.less

@@ -1,37 +1,37 @@
-.setting-pic-circle-select {
-  margin-top: -16px;
-  &-btn {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    align-items: center;
-    margin-bottom: 16px;
-    color: var(--io-N8-, #354354);
-    font-size: 14px;
-    .ant-btn {
-      padding: 0 15px;
-    }
-    .select {
-      color: #1454e5;
-      border: 1px solid #1454e5;
-    }
-  }
-  &-content {
-    position: relative;
-    width: 672px;
-    height: 350px;
-    overflow-x: auto;
-    overflow-y: auto;
-    background: var(--io-n-02, #fafafb);
-    border: 1px solid var(--io-N1-, #e6e7ea);
-    border-radius: 4px;
-  }
-  &-read-bg {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: transparent;
-  }
-}
+.setting-pic-circle-select {
+  margin-top: -16px;
+  &-btn {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+    color: var(--io-N8-, #354354);
+    font-size: 14px;
+    .ant-btn {
+      padding: 0 15px;
+    }
+    .select {
+      color: #1454e5;
+      border: 1px solid #1454e5;
+    }
+  }
+  &-content {
+    position: relative;
+    width: 672px;
+    height: 350px;
+    overflow-x: auto;
+    overflow-y: auto;
+    background: var(--io-n-02, #fafafb);
+    border: 1px solid var(--io-N1-, #e6e7ea);
+    border-radius: 4px;
+  }
+  &-read-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: transparent;
+  }
+}

package/es/components/processCanvas/styles/customNode.less

@@ -1,149 +1,149 @@
-@import '~@zgfe/business-lib/es/assets/styles/inner.less';
-.base-node {
-  padding-bottom: 8px;
-  background: #fff;
-  border: 2px solid transparent;
-  border-radius: 8px;
-  /* 投影/一级下拉菜单 */
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  .base-node-top {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    height: 40px;
-    padding: 0 8px;
-    &-txt {
-      flex: 1;
-      overflow: hidden;
-      color: var(--io-N-, #021429);
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px; /* 150% */
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-  .base-node-top:hover {
-    .zhongmingming {
-      color: #457dff;
-    }
-  }
-  .base-node-content {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    align-self: stretch;
-    height: 24px;
-    margin: 0 8px;
-    padding: 0px 4px;
-    color: var(--io-N6-, #67727f);
-    font-weight: 400;
-    font-size: 14px;
-    font-family: 'PingFang SC';
-    font-style: normal;
-    line-height: normal;
-    background: #f4f6f8;
-    border-radius: 4px;
-  }
-  &:hover {
-    .close-btn {
-      color: #fff;
-      background: #ccd0d4;
-    }
-  }
-  .close-btn-bg {
-    position: absolute;
-    top: -24px;
-    right: -36px;
-    padding: 12px;
-  }
-  .base-node-approve-time {
-    position: absolute;
-    bottom: -24px;
-    left: 0;
-    color: var(--io-N4-, #9aa1a9);
-    font-size: 12px;
-    line-height: 20px; /* 166.667% */
-  }
-  .base-node-approve-detail {
-    position: absolute;
-    bottom: -44px;
-    left: 0;
-    font-size: 12px;
-    line-height: 20px; /* 166.667% */
-  }
-  .close-btn:hover {
-    color: #fff;
-    background: #ccd0d4;
-  }
-  .close-btn {
-    width: 24px;
-    height: 24px;
-    padding-left: 4px;
-    color: transparent;
-    font-size: 16px;
-    background: transparent;
-    border-radius: 12px;
-  }
-  .close-btn:hover {
-    color: #fff;
-    background: #fb5547;
-  }
-  .shenpi {
-    color: #457dff;
-    font-size: 18px !important;
-  }
-  .check_filled {
-    color: #29bd52;
-    font-size: 18px !important;
-  }
-  .tishi1 {
-    color: #fb5547;
-    font-size: 18px !important;
-  }
-  .zhongmingming {
-    color: #ccd0d4;
-    font-size: 20px !important;
-  }
-}
-.base-btn-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 8px;
-  color: #457dff;
-  font-size: 16px;
-  background: #fff;
-  border-radius: 16px;
-  /* 投影/一级下拉菜单 */
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-.base-btn-add:hover {
-  color: #fff;
-  background: #457dff;
-}
-.node-end {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  width: 224px;
-  height: 40px;
-  padding: 0px 8px;
-  overflow: hidden;
-  color: var(--io-N-, #021429);
-  font-weight: 400;
-  font-size: 16px;
-  font-family: 'PingFang SC';
-  font-style: normal;
-  line-height: 22px; /* 137.5% */
-  text-overflow: ellipsis;
-  background: #fff;
-  border-radius: 20px;
-
-  /* 投影/一级下拉菜单 */
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
-}
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+.base-node {
+  padding-bottom: 8px;
+  background: #fff;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  /* 投影/一级下拉菜单 */
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  .base-node-top {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: 40px;
+    padding: 0 8px;
+    &-txt {
+      flex: 1;
+      overflow: hidden;
+      color: var(--io-N-, #021429);
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px; /* 150% */
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .base-node-top:hover {
+    .zhongmingming {
+      color: #457dff;
+    }
+  }
+  .base-node-content {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    align-self: stretch;
+    height: 24px;
+    margin: 0 8px;
+    padding: 0px 4px;
+    color: var(--io-N6-, #67727f);
+    font-weight: 400;
+    font-size: 14px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    line-height: normal;
+    background: #f4f6f8;
+    border-radius: 4px;
+  }
+  &:hover {
+    .close-btn {
+      color: #fff;
+      background: #ccd0d4;
+    }
+  }
+  .close-btn-bg {
+    position: absolute;
+    top: -24px;
+    right: -36px;
+    padding: 12px;
+  }
+  .base-node-approve-time {
+    position: absolute;
+    bottom: -24px;
+    left: 0;
+    color: var(--io-N4-, #9aa1a9);
+    font-size: 12px;
+    line-height: 20px; /* 166.667% */
+  }
+  .base-node-approve-detail {
+    position: absolute;
+    bottom: -44px;
+    left: 0;
+    font-size: 12px;
+    line-height: 20px; /* 166.667% */
+  }
+  .close-btn:hover {
+    color: #fff;
+    background: #ccd0d4;
+  }
+  .close-btn {
+    width: 24px;
+    height: 24px;
+    padding-left: 4px;
+    color: transparent;
+    font-size: 16px;
+    background: transparent;
+    border-radius: 12px;
+  }
+  .close-btn:hover {
+    color: #fff;
+    background: #fb5547;
+  }
+  .shenpi {
+    color: #457dff;
+    font-size: 18px !important;
+  }
+  .check_filled {
+    color: #29bd52;
+    font-size: 18px !important;
+  }
+  .tishi1 {
+    color: #fb5547;
+    font-size: 18px !important;
+  }
+  .zhongmingming {
+    color: #ccd0d4;
+    font-size: 20px !important;
+  }
+}
+.base-btn-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  color: #457dff;
+  font-size: 16px;
+  background: #fff;
+  border-radius: 16px;
+  /* 投影/一级下拉菜单 */
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+.base-btn-add:hover {
+  color: #fff;
+  background: #457dff;
+}
+.node-end {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 224px;
+  height: 40px;
+  padding: 0px 8px;
+  overflow: hidden;
+  color: var(--io-N-, #021429);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+  font-style: normal;
+  line-height: 22px; /* 137.5% */
+  text-overflow: ellipsis;
+  background: #fff;
+  border-radius: 20px;
+
+  /* 投影/一级下拉菜单 */
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+}

package/es/components/processCanvas/styles/index.less

@@ -1,34 +1,34 @@
-@import '~@zgfe/business-lib/es/assets/styles/inner.less';
-.setting-graph-panel {
-  position: absolute;
-  // background: #fff;
-  top: 12px;
-  left: 50%;
-  z-index: 1;
-  height: 32px;
-  padding: 7px 12px;
-  transform: translateX(-50%);
-  .x6-toolbar-group {
-    gap: 5px;
-  }
-}
-// .setting-graph-canvas::-webkit-scrollbar{
-//   width: 10px;
-// }
-
-.x6-widget-transform-resize {
-  display: none;
-}
-.x6-widget-transform-cursor-ne {
-  display: inherit;
-}
-.flow-container {
-  display: flex;
-  flex-direction: column;
-  .x6-toolbar {
-    flex: none;
-  }
-  .x6-graph {
-    flex: 1;
-  }
-}
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+.setting-graph-panel {
+  position: absolute;
+  // background: #fff;
+  top: 12px;
+  left: 50%;
+  z-index: 1;
+  height: 32px;
+  padding: 7px 12px;
+  transform: translateX(-50%);
+  .x6-toolbar-group {
+    gap: 5px;
+  }
+}
+// .setting-graph-canvas::-webkit-scrollbar{
+//   width: 10px;
+// }
+
+.x6-widget-transform-resize {
+  display: none;
+}
+.x6-widget-transform-cursor-ne {
+  display: inherit;
+}
+.flow-container {
+  display: flex;
+  flex-direction: column;
+  .x6-toolbar {
+    flex: none;
+  }
+  .x6-graph {
+    flex: 1;
+  }
+}