strategy-panel 1.0.1-rc-19 → 1.0.2

package/es/assets/decive.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
   <title>设备管理 (2)</title>
   <g id="全局样式" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
     <g id="Icons" transform="translate(-431.000000, -1228.000000)" fill="#323232" fill-rule="nonzero">

package/es/assets/hand.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="27px" viewBox="0 0 28 27" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
   <title>手动</title>
   <g id="全局样式" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
     <g id="Icons" transform="translate(-582.000000, -1228.000000)" fill="#323232" fill-rule="nonzero">

package/es/assets/lock.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.744" height="31.16" viewBox="0 0 24.744 31.16">
-  <defs>
-    <style>.a{fill:#595959;}</style>
-  </defs>
-  <path class="a" d="M46.413,18.491V16.044a5.769,5.769,0,0,0-1.6-4.286,5.734,5.734,0,0,0-4.189-1.57,5.251,5.251,0,0,0-3.955,1.6,5.925,5.925,0,0,0-1.505,4.255v2.446H33.975V15.118a5.507,5.507,0,0,1,.493-2.34,6.22,6.22,0,0,1,1.4-1.949,6.7,6.7,0,0,1,2.141-1.338A7.431,7.431,0,0,1,40.755,9a6.645,6.645,0,0,1,2.5.487,7.207,7.207,0,0,1,2.167,1.356,6.658,6.658,0,0,1,1.488,1.974,5.076,5.076,0,0,1,.524,2.3v3.373Z" transform="translate(-28.35 -7.51)"></path>
-  <path class="a" d="M33.245,0a8.872,8.872,0,0,0-3.291.6A8.147,8.147,0,0,0,27.34,2.233,7.665,7.665,0,0,0,25.6,4.648a7.026,7.026,0,0,0-.628,2.961v4.863h4.168V8.534a4.48,4.48,0,0,1,1.092-3.225,3.8,3.8,0,0,1,2.878-1.141,4.282,4.282,0,0,1,3.143,1.141,4.325,4.325,0,0,1,1.158,3.225v3.936h4V7.608a6.6,6.6,0,0,0-.678-2.961,8.107,8.107,0,0,0-1.819-2.415A8.656,8.656,0,0,0,36.3.6a8.087,8.087,0,0,0-3.06-.6" transform="translate(-20.84)"></path>
-  <path class="a" d="M21.764,90.293v9.458a1.457,1.457,0,0,1-.1.554,1.351,1.351,0,0,1-.266.429,1,1,0,0,1-.332.231,1.048,1.048,0,0,1-.427.074H3.937a.962.962,0,0,1-.388-.064.936.936,0,0,1-.3-.2.913.913,0,0,1-.186-.307,1.315,1.315,0,0,1-.081-.481V90.293H21.764m.8-2.98H2.15a2.047,2.047,0,0,0-1.522.645A2.128,2.128,0,0,0,0,89.5V99.982a4.273,4.273,0,0,0,.281,1.555,3.846,3.846,0,0,0,3.655,2.481H20.642a3.945,3.945,0,0,0,2.928-1.24,4.311,4.311,0,0,0,.86-1.356,4.412,4.412,0,0,0,.314-1.67V89.5a2.2,2.2,0,0,0-2.183-2.183" transform="translate(0 -72.858)"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="24.744" height="31.16" viewBox="0 0 24.744 31.16">
+  <defs>
+    <style>.a{fill:#595959;}</style>
+  </defs>
+  <path class="a" d="M46.413,18.491V16.044a5.769,5.769,0,0,0-1.6-4.286,5.734,5.734,0,0,0-4.189-1.57,5.251,5.251,0,0,0-3.955,1.6,5.925,5.925,0,0,0-1.505,4.255v2.446H33.975V15.118a5.507,5.507,0,0,1,.493-2.34,6.22,6.22,0,0,1,1.4-1.949,6.7,6.7,0,0,1,2.141-1.338A7.431,7.431,0,0,1,40.755,9a6.645,6.645,0,0,1,2.5.487,7.207,7.207,0,0,1,2.167,1.356,6.658,6.658,0,0,1,1.488,1.974,5.076,5.076,0,0,1,.524,2.3v3.373Z" transform="translate(-28.35 -7.51)"></path>
+  <path class="a" d="M33.245,0a8.872,8.872,0,0,0-3.291.6A8.147,8.147,0,0,0,27.34,2.233,7.665,7.665,0,0,0,25.6,4.648a7.026,7.026,0,0,0-.628,2.961v4.863h4.168V8.534a4.48,4.48,0,0,1,1.092-3.225,3.8,3.8,0,0,1,2.878-1.141,4.282,4.282,0,0,1,3.143,1.141,4.325,4.325,0,0,1,1.158,3.225v3.936h4V7.608a6.6,6.6,0,0,0-.678-2.961,8.107,8.107,0,0,0-1.819-2.415A8.656,8.656,0,0,0,36.3.6a8.087,8.087,0,0,0-3.06-.6" transform="translate(-20.84)"></path>
+  <path class="a" d="M21.764,90.293v9.458a1.457,1.457,0,0,1-.1.554,1.351,1.351,0,0,1-.266.429,1,1,0,0,1-.332.231,1.048,1.048,0,0,1-.427.074H3.937a.962.962,0,0,1-.388-.064.936.936,0,0,1-.3-.2.913.913,0,0,1-.186-.307,1.315,1.315,0,0,1-.081-.481V90.293H21.764m.8-2.98H2.15a2.047,2.047,0,0,0-1.522.645A2.128,2.128,0,0,0,0,89.5V99.982a4.273,4.273,0,0,0,.281,1.555,3.846,3.846,0,0,0,3.655,2.481H20.642a3.945,3.945,0,0,0,2.928-1.24,4.311,4.311,0,0,0,.86-1.356,4.412,4.412,0,0,0,.314-1.67V89.5a2.2,2.2,0,0,0-2.183-2.183" transform="translate(0 -72.858)"></path>
 </svg>

package/es/components/canvas/component-tree-panel/category-tree/category-type.js

@@ -1,4 +1,16 @@
 import { COMPONENTS_TYPE, COMMONLY_USED, SCENE_DISPLAY, SIGN_OPERATION, MOTION_OPERATION } from "../../../../packages/graph-canvas/node-types";
+import variate from "../../../../assets/variate.svg";
+import lock from "../../../../assets/lock.svg";
+import device from "../../../../assets/decive.svg";
+import time from "../../../../assets/time.svg";
+import hand from "../../../../assets/hand.svg";
+import relation from "../../../../assets/relation.svg";
+import logical from "../../../../assets/logical.svg";
+import condition from "../../../../assets/condition.svg";
+import alarm from "../../../../assets/alarm.svg";
+import notice from "../../../../assets/notice.svg";
+import order from "../../../../assets/order.svg";
+import control from "../../../../assets/control.svg";
 export var componentsData = [{
   id: COMPONENTS_TYPE.COMMONLY_USED,
   name: '通用组件',
@@ -6,11 +18,11 @@ export var componentsData = [{
   children: [{
     id: COMMONLY_USED.VARIATE,
     name: '变量',
-    imgUrl: require("../../../../assets/variate.svg")
+    imgUrl: variate
   }, {
     id: COMMONLY_USED.LOCKED,
     name: '服务锁定',
-    imgUrl: require("../../../../assets/lock.svg")
+    imgUrl: lock
   }]
 }, {
   id: COMPONENTS_TYPE.SCENE_DISPLAY,
@@ -19,16 +31,16 @@ export var componentsData = [{
   children: [{
     id: SCENE_DISPLAY.EQUIPMENT,
     name: '设备触发',
-    imgUrl: require("../../../../assets/decive.svg"),
+    imgUrl: device,
     number: 1
   }, {
     id: SCENE_DISPLAY.TIME,
     name: '时间触发',
-    imgUrl: require("../../../../assets/time.svg")
+    imgUrl: time
   }, {
     id: SCENE_DISPLAY.MANUAL,
     name: '手动按钮',
-    imgUrl: require("../../../../assets/hand.svg")
+    imgUrl: hand
   }]
 }, {
   id: COMPONENTS_TYPE.SIGN_OPERATION,
@@ -37,15 +49,15 @@ export var componentsData = [{
   children: [{
     id: SIGN_OPERATION.RELATION,
     name: '关系运算',
-    imgUrl: require("../../../../assets/relation.svg")
+    imgUrl: relation
   }, {
     id: SIGN_OPERATION.LOGICAL,
     name: '逻辑运算',
-    imgUrl: require("../../../../assets/logical.svg")
+    imgUrl: logical
   }, {
     id: SIGN_OPERATION.CONDITION,
     name: '条件判断',
-    imgUrl: require("../../../../assets/condition.svg")
+    imgUrl: condition
   }]
 }, {
   id: COMPONENTS_TYPE.MOTION_OPERATION,
@@ -54,19 +66,19 @@ export var componentsData = [{
   children: [{
     id: MOTION_OPERATION.ALARM,
     name: '报警',
-    imgUrl: require("../../../../assets/alarm.svg")
+    imgUrl: alarm
   }, {
     id: MOTION_OPERATION.NOTICE,
     name: '通知',
-    imgUrl: require("../../../../assets/notice.svg")
+    imgUrl: notice
   }, {
     id: MOTION_OPERATION.ORDER,
     name: '派发工单',
-    imgUrl: require("../../../../assets/order.svg")
+    imgUrl: order
   }, {
     id: MOTION_OPERATION.CONTROL,
     name: '远程控制',
-    imgUrl: require("../../../../assets/control.svg")
+    imgUrl: control
   }]
 }, {
   id: COMPONENTS_TYPE.APPLICATION,

package/es/components/canvas/component-tree-panel/category-tree/index.js

@@ -72,6 +72,7 @@ var CategoryTree = function CategoryTree(props) {
   var defaultActiveKey = currentPanelData === null || currentPanelData === void 0 ? void 0 : currentPanelData.map(function (item) {
     return item === null || item === void 0 ? void 0 : item.id;
   });
+  console.log('xxxxcurrentPanelData', currentPanelData, componentsData);
   return /*#__PURE__*/React.createElement("div", {
     className: "category-tree-list"
   }, /*#__PURE__*/React.createElement(Collapse, {

package/es/components/canvas/component-tree-panel/category-tree/node-title.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DragSource } from 'react-dnd';
 import marked from 'marked';
 import { DRAGGABLE_ALGO_COMPONENT } from "../../../../packages/graph-common/graph";
+import application from "../../../../assets/application.svg";
 import "./node-title.less";
 marked.setOptions({
   gfm: true,
@@ -18,7 +19,8 @@ var InnerNodeTitle = function InnerNodeTitle(props) {
   var _node$name = node.name,
       name = _node$name === void 0 ? '' : _node$name,
       isDir = node.isDir,
-      imgUrl = node.imgUrl; // 文件夹
+      imgUrl = node.imgUrl;
+  console.log('InnerNodeTitlexxxx', node); // 文件夹
 
   if (isDir) {
     return /*#__PURE__*/React.createElement("div", {
@@ -36,7 +38,7 @@ var InnerNodeTitle = function InnerNodeTitle(props) {
   }, /*#__PURE__*/React.createElement("img", {
     alt: name,
     className: "node-icon",
-    src: imgUrl || require("../../../../assets/application.svg")
+    src: imgUrl || application
   })))), /*#__PURE__*/React.createElement("span", {
     className: "label"
   }, name));

package/es/components/canvas/component-tree-panel/index.js

@@ -7,6 +7,7 @@ var ComponentTreePanel = function ComponentTreePanel(props) {
   var className = props.className,
       _props$panelData = props.panelData,
       panelData = _props$panelData === void 0 ? [] : _props$panelData;
+  console.log('ComponentTreePanelxxxxxxxx', panelData);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'node-source-tree-container', 'node-source-tree-shadow')
   }, /*#__PURE__*/React.createElement("div", {

package/es/components/canvas/config-panel/components/condition-configuration/index.js

@@ -20,6 +20,9 @@ import { useObservableState } from "../../../../../packages/hooks/useObservableS
 import { COMMONLY_USED, SCENE_DISPLAY } from "../../../../../packages/graph-canvas/node-types";
 import ConfigureModal from "./configure-modal";
 import CrossLine from "./cross-line";
+import editSvg from "../../../../../assets/edit.svg";
+import deleteSvg from "../../../../../assets/delete.svg";
+import addSvg from "../../../../../assets/add.svg";
 import "./style.less";
 
 var getRelationData = function getRelationData(expGraph, nodeId) {
@@ -145,7 +148,7 @@ var ConditionConfiguration = function ConditionConfiguration(props) {
         onClick: function onClick() {
           return handleOpenEdit(item, index);
         },
-        src: require("../../../../../assets/edit.svg"),
+        src: editSvg,
         className: classNames('icon', 'mr-10')
       }), /*#__PURE__*/React.createElement(Popconfirm, {
         placement: "left",
@@ -156,7 +159,7 @@ var ConditionConfiguration = function ConditionConfiguration(props) {
           return handleRemoveCondition(index);
         }
       }, /*#__PURE__*/React.createElement(ReactSVG, {
-        src: require("../../../../../assets/delete.svg"),
+        src: deleteSvg,
         className: "icon"
       })))), index !== value.length - 1 && /*#__PURE__*/React.createElement(CrossLine, {
         disabled: modeDisabled,
@@ -170,7 +173,7 @@ var ConditionConfiguration = function ConditionConfiguration(props) {
     className: "condition-edit-box",
     onClick: handleOpenConfigure
   }, /*#__PURE__*/React.createElement(ReactSVG, {
-    src: require("../../../../../assets/add.svg"),
+    src: addSvg,
     className: "icon"
   }), "\u6DFB\u52A0"), /*#__PURE__*/React.createElement(ConfigureModal, {
     visible: visible,

package/es/components/canvas/config-panel/style.less

@@ -1,90 +1,90 @@
-@e9-color: #e9e9e9;
-@f2-color: #F2F2F2;
-@black-color: #323232;
-
-.config-panel {
-  width: 350px;
-  min-width: 350px;
-  margin-top: -1px;
-  margin-right: -360px;
-  border: 1px solid @e9-color;
-  transition: margin-right 0.3s ease-out;
-  &.selected {
-    margin-right: 0;
-  }
-}
-
-.setting {
-  height: 100%;
-  .form {
-    flex-grow: 1;
-    height: 100%;
-    padding: 10px 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background: #fff;
-  }
-}
-
-.no-margin-bottom {
-  margin-bottom: 0 !important;
-}
-
-.config-panel-form{
-  & > .border-bottom:last-child{
-    margin-bottom: 50px;
-  }
-}
-
-.border-bottom {
-  margin-bottom: 6px;
-  padding: 0 10px 12px;
-  border-bottom: 1px solid @e9-color;
-  &.inner-bottom-box{
-    margin: 0 -10px -13px;
-  }
-  &.inner-bottom-box:not(:first-child) {
-    margin-top: 18px;
-  }
-
-  .ant-form-item-with-help .ant-form-item-explain {
-    display: none;
-  }
-  .ant-input,
-  .ant-input-number,
-  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,
-  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{
-    border-radius: 4px;
-    color: @black-color !important;
-    background: @f2-color !important;
-  }
-  .ant-picker,
-  .ant-picker:not([disabled]):hover,
-  .ant-picker-status-error.ant-picker, .ant-picker-status-error.ant-picker:not([disabled]):hover{
-    border-radius: 4px;
-    color: @black-color !important;
-    background: @f2-color !important;
-  }
-  .ant-form-item-has-error .ant-input-number:not([disabled]):hover,
-  .ant-form-item-has-error .ant-picker:not([disabled]):hover,
-  .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{
-    border-radius: 4px;
-    color: @black-color !important;
-    background: @f2-color !important;
-  }
-  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
-    border-radius: 4px;
-    color: @black-color !important;
-    background: @f2-color !important;
-  }
-
-  .id-line{
-    margin-top: 5px;
-    text-align: right;
-    user-select: all;
-  }
-}
-
-.section-detail-select{
-  display: flex;
-}
+@e9-color: #e9e9e9;
+@f2-color: #F2F2F2;
+@black-color: #323232;
+
+.config-panel {
+  width: 350px;
+  min-width: 350px;
+  margin-top: -1px;
+  margin-right: -360px;
+  border: 1px solid @e9-color;
+  transition: margin-right 0.3s ease-out;
+  &.selected {
+    margin-right: 0;
+  }
+}
+
+.setting {
+  height: 100%;
+  .form {
+    flex-grow: 1;
+    height: 100%;
+    padding: 10px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: #fff;
+  }
+}
+
+.no-margin-bottom {
+  margin-bottom: 0 !important;
+}
+
+.config-panel-form{
+  & > .border-bottom:last-child{
+    margin-bottom: 50px;
+  }
+}
+
+.border-bottom {
+  margin-bottom: 6px;
+  padding: 0 10px 12px;
+  border-bottom: 1px solid @e9-color;
+  &.inner-bottom-box{
+    margin: 0 -10px -13px;
+  }
+  &.inner-bottom-box:not(:first-child) {
+    margin-top: 18px;
+  }
+
+  .ant-form-item-with-help .ant-form-item-explain {
+    display: none;
+  }
+  .ant-input,
+  .ant-input-number,
+  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,
+  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-picker,
+  .ant-picker:not([disabled]):hover,
+  .ant-picker-status-error.ant-picker, .ant-picker-status-error.ant-picker:not([disabled]):hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-form-item-has-error .ant-input-number:not([disabled]):hover,
+  .ant-form-item-has-error .ant-picker:not([disabled]):hover,
+  .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+
+  .id-line{
+    margin-top: 5px;
+    text-align: right;
+    user-select: all;
+  }
+}
+
+.section-detail-select{
+  display: flex;
+}

package/es/components/canvas/strategy-header/index.js

@@ -10,6 +10,9 @@ import React from 'react';
 import { DataUri } from '@antv/x6';
 import { content } from '@antv/x6/es/style/raw';
 import { useExperimentGraph } from "../../../packages/graph-canvas";
+import saveSvg from "../../../assets/save.svg";
+import cancelSvg from "../../../assets/cancel.svg";
+import checkSvg from "../../../assets/check.svg";
 import { raw } from "../../../style/svgRaw";
 import "../../../style/position.less";
 import "./style.less";
@@ -49,6 +52,7 @@ var Index = function Index(props) {
       var _expGraph$graph3;
 
       expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph3 = expGraph.graph) === null || _expGraph$graph3 === void 0 ? void 0 : _expGraph$graph3.toSVG(function (dataUri) {
+        // DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg');
         var img = new Image();
         img.src = DataUri.svgToDataUrl(dataUri);
 
@@ -166,7 +170,7 @@ var Index = function Index(props) {
   }, /*#__PURE__*/React.createElement("img", {
     alt: "",
     className: "header-btn-img",
-    src: require("../../../assets/cancel.svg")
+    src: cancelSvg
   }), "\u53D6\u6D88"), /*#__PURE__*/React.createElement("span", {
     className: "header-btn",
     onClick: function onClick() {
@@ -175,7 +179,7 @@ var Index = function Index(props) {
   }, /*#__PURE__*/React.createElement("img", {
     alt: "",
     className: "header-btn-img",
-    src: require("../../../assets/save.svg")
+    src: saveSvg
   }), "\u4FDD\u5B58"), isActive ? /*#__PURE__*/React.createElement("span", {
     className: "header-btn",
     style: {
@@ -187,7 +191,7 @@ var Index = function Index(props) {
   }, /*#__PURE__*/React.createElement("img", {
     alt: "",
     className: "header-btn-img",
-    src: require("../../../assets/cancel.svg")
+    src: cancelSvg
   }), "\u505C\u7528") : /*#__PURE__*/React.createElement("span", {
     className: "header-btn",
     style: {
@@ -199,7 +203,7 @@ var Index = function Index(props) {
   }, /*#__PURE__*/React.createElement("img", {
     alt: "",
     className: "header-btn-img",
-    src: require("../../../assets/check.svg")
+    src: checkSvg
   }), "\u542F\u7528"))));
 };
 

package/es/packages/graph-canvas/graph-model/node/common-node/node-element.js

@@ -35,12 +35,16 @@ var NodeElement = function NodeElement(props) {
 
   var nodeId = activeNodeInstance && activeNodeInstance.id;
   var nodeFormData = typeof nodeData === 'string' ? JSON.parse(nodeData) : nodeData;
+  console.log('NodeElement', data);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('node-element', {
       selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: imgUrl,
+    beforeInjection: function beforeInjection(svg) {
+      svg.setAttribute('viewBox', '0 0 30 30');
+    },
     className: "icon"
   }), /*#__PURE__*/React.createElement("div", {
     className: "name"

package/es/packages/graph-canvas/graph-model/node/common-node/node-element.less

@@ -25,9 +25,9 @@
     }
   }
   .icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 12px;
+    width: 20px !important;
+    height: 20px !important;
+    margin-right: 12px !important;
     svg {
       width: 20px;
       height: 20px;

package/es/packages/graph-canvas/graph-model/node/condition-node/condition-element.js

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { ReactSVG } from 'react-svg';
 import { useExperimentGraph } from "../../..";
 import { useObservableState } from "../../../../hooks/useObservableState";
+import rhombus from "./images/rhombus.svg";
 import "./condition-element.less";
 
 var ConditionElement = function ConditionElement(props) {
@@ -40,13 +41,22 @@ var ConditionElement = function ConditionElement(props) {
       selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
-    src: require("./images/rhombus.svg"),
-    className: classNames('node-rhombus-element-bg')
+    src: rhombus,
+    className: classNames('node-rhombus-element-bg'),
+    beforeInjection: function beforeInjection(svg) {
+      svg.setAttribute('width', '259px');
+      svg.setAttribute('height', '110px'); // svg.setAttribute('viewBox', '0 0 120 800');
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: "rhombus-inner"
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: imgUrl,
-    className: "icon"
+    className: "icon",
+    beforeInjection: function beforeInjection(svg) {
+      svg.setAttribute('width', '10px');
+      svg.setAttribute('height', '10px');
+      svg.setAttribute('viewBox', '0 0 30 30');
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: "name"
   }, (nodeFormData === null || nodeFormData === void 0 ? void 0 : nodeFormData.realName) || name)));

package/es/packages/graph-canvas/graph-model/node/condition-node/condition-element.less

@@ -37,13 +37,13 @@
   &.selected,
   &:hover {
     .node-rhombus-element-bg{
-      svg path {
+      div svg path {
         fill: @node-element-primary-color;
       }
     }
     .icon {
-      svg path {
-        fill: #fff;
+      div svg path {
+        fill: #fff !important;
       }
     }
     .name {
@@ -54,12 +54,12 @@
   .icon {
     width: 20px;
     height: 20px;
-    margin-right: 12px;
+    margin-right: 12px !important;
     svg {
       width: 20px;
       height: 20px;
       path {
-        fill: @node-element-primary-color;
+        fill: @node-element-primary-color !important;
       }
     }
   }

package/es/packages/graph-canvas/graph-model/node/logical-node/images/locking.svg

@@ -1,8 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.744" height="31.16" viewBox="0 0 24.744 31.16">
-  <defs>
-    <style>.a{fill:#595959;}</style>
-  </defs>
-  <path class="a" d="M46.413,18.491V16.044a5.769,5.769,0,0,0-1.6-4.286,5.734,5.734,0,0,0-4.189-1.57,5.251,5.251,0,0,0-3.955,1.6,5.925,5.925,0,0,0-1.505,4.255v2.446H33.975V15.118a5.507,5.507,0,0,1,.493-2.34,6.22,6.22,0,0,1,1.4-1.949,6.7,6.7,0,0,1,2.141-1.338A7.431,7.431,0,0,1,40.755,9a6.645,6.645,0,0,1,2.5.487,7.207,7.207,0,0,1,2.167,1.356,6.658,6.658,0,0,1,1.488,1.974,5.076,5.076,0,0,1,.524,2.3v3.373Z" transform="translate(-28.35 -7.51)"></path>
-  <path class="a" d="M33.245,0a8.872,8.872,0,0,0-3.291.6A8.147,8.147,0,0,0,27.34,2.233,7.665,7.665,0,0,0,25.6,4.648a7.026,7.026,0,0,0-.628,2.961v4.863h4.168V8.534a4.48,4.48,0,0,1,1.092-3.225,3.8,3.8,0,0,1,2.878-1.141,4.282,4.282,0,0,1,3.143,1.141,4.325,4.325,0,0,1,1.158,3.225v3.936h4V7.608a6.6,6.6,0,0,0-.678-2.961,8.107,8.107,0,0,0-1.819-2.415A8.656,8.656,0,0,0,36.3.6a8.087,8.087,0,0,0-3.06-.6" transform="translate(-20.84)"></path>
-  <path class="a" d="M21.764,90.293v9.458a1.457,1.457,0,0,1-.1.554,1.351,1.351,0,0,1-.266.429,1,1,0,0,1-.332.231,1.048,1.048,0,0,1-.427.074H3.937a.962.962,0,0,1-.388-.064.936.936,0,0,1-.3-.2.913.913,0,0,1-.186-.307,1.315,1.315,0,0,1-.081-.481V90.293H21.764m.8-2.98H2.15a2.047,2.047,0,0,0-1.522.645A2.128,2.128,0,0,0,0,89.5V99.982a4.273,4.273,0,0,0,.281,1.555,3.846,3.846,0,0,0,3.655,2.481H20.642a3.945,3.945,0,0,0,2.928-1.24,4.311,4.311,0,0,0,.86-1.356,4.412,4.412,0,0,0,.314-1.67V89.5a2.2,2.2,0,0,0-2.183-2.183" transform="translate(0 -72.858)"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24.744" height="31.16" viewBox="0 0 24.744 31.16">
+  <path fill="#595959" d="M46.413,18.491V16.044a5.769,5.769,0,0,0-1.6-4.286,5.734,5.734,0,0,0-4.189-1.57,5.251,5.251,0,0,0-3.955,1.6,5.925,5.925,0,0,0-1.505,4.255v2.446H33.975V15.118a5.507,5.507,0,0,1,.493-2.34,6.22,6.22,0,0,1,1.4-1.949,6.7,6.7,0,0,1,2.141-1.338A7.431,7.431,0,0,1,40.755,9a6.645,6.645,0,0,1,2.5.487,7.207,7.207,0,0,1,2.167,1.356,6.658,6.658,0,0,1,1.488,1.974,5.076,5.076,0,0,1,.524,2.3v3.373Z" transform="translate(-28.35 -7.51)"></path>
+  <path fill="#595959" d="M33.245,0a8.872,8.872,0,0,0-3.291.6A8.147,8.147,0,0,0,27.34,2.233,7.665,7.665,0,0,0,25.6,4.648a7.026,7.026,0,0,0-.628,2.961v4.863h4.168V8.534a4.48,4.48,0,0,1,1.092-3.225,3.8,3.8,0,0,1,2.878-1.141,4.282,4.282,0,0,1,3.143,1.141,4.325,4.325,0,0,1,1.158,3.225v3.936h4V7.608a6.6,6.6,0,0,0-.678-2.961,8.107,8.107,0,0,0-1.819-2.415A8.656,8.656,0,0,0,36.3.6a8.087,8.087,0,0,0-3.06-.6" transform="translate(-20.84)"></path>
+  <path fill="#595959" d="M21.764,90.293v9.458a1.457,1.457,0,0,1-.1.554,1.351,1.351,0,0,1-.266.429,1,1,0,0,1-.332.231,1.048,1.048,0,0,1-.427.074H3.937a.962.962,0,0,1-.388-.064.936.936,0,0,1-.3-.2.913.913,0,0,1-.186-.307,1.315,1.315,0,0,1-.081-.481V90.293H21.764m.8-2.98H2.15a2.047,2.047,0,0,0-1.522.645A2.128,2.128,0,0,0,0,89.5V99.982a4.273,4.273,0,0,0,.281,1.555,3.846,3.846,0,0,0,3.655,2.481H20.642a3.945,3.945,0,0,0,2.928-1.24,4.311,4.311,0,0,0,.86-1.356,4.412,4.412,0,0,0,.314-1.67V89.5a2.2,2.2,0,0,0-2.183-2.183" transform="translate(0 -72.858)"></path>
+</svg>

package/es/packages/graph-canvas/graph-model/node/logical-node/images/unlock.svg

@@ -1,8 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33.008" height="31.16" viewBox="0 0 33.008 31.16">
-  <defs>
-    <style>.a{fill:#595959;}</style>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33">
   <g transform="translate(-1.496 -1.733)">
-    <path class="a" d="M30.765,26.483V35.9a1.557,1.557,0,0,1-.1.582,1,1,0,0,1-.579.612,1.028,1.028,0,0,1-.419.072h-16.7a1.118,1.118,0,0,1-.431-.068.878.878,0,0,1-.293-.194.756.756,0,0,1-.166-.266,1.3,1.3,0,0,1-.08-.473V26.483H30.765M33.822,9a8.852,8.852,0,0,0-3.284.594,8.126,8.126,0,0,0-2.608,1.634A7.593,7.593,0,0,0,26.2,13.655a7.123,7.123,0,0,0-.627,2.971v4.951h4.159V17.55a4.529,4.529,0,0,1,1.089-3.235A3.763,3.763,0,0,1,33.69,13.16a4.294,4.294,0,0,1,3.152,1.155,4.337,4.337,0,0,1,1.172,3.235v3.961h3.994V16.626a6.551,6.551,0,0,0-.693-2.971,8.251,8.251,0,0,0-1.832-2.426,8.633,8.633,0,0,0-2.608-1.634A8.069,8.069,0,0,0,33.822,9M31.578,23.492H11.146A2.17,2.17,0,0,0,9,25.67v10.5a4.269,4.269,0,0,0,.281,1.551,3.741,3.741,0,0,0,.809,1.271,3.853,3.853,0,0,0,1.254.858,4.039,4.039,0,0,0,1.617.314h16.7a3.98,3.98,0,0,0,1.634-.33,3.987,3.987,0,0,0,2.145-2.244,4.535,4.535,0,0,0,.313-1.683V25.67a2.142,2.142,0,0,0-2.179-2.179" transform="translate(-7.504 -7.268)"></path>
+    <path fill="#595959" d="M30.765,26.483V35.9a1.557,1.557,0,0,1-.1.582,1,1,0,0,1-.579.612,1.028,1.028,0,0,1-.419.072h-16.7a1.118,1.118,0,0,1-.431-.068.878.878,0,0,1-.293-.194.756.756,0,0,1-.166-.266,1.3,1.3,0,0,1-.08-.473V26.483H30.765M33.822,9a8.852,8.852,0,0,0-3.284.594,8.126,8.126,0,0,0-2.608,1.634A7.593,7.593,0,0,0,26.2,13.655a7.123,7.123,0,0,0-.627,2.971v4.951h4.159V17.55a4.529,4.529,0,0,1,1.089-3.235A3.763,3.763,0,0,1,33.69,13.16a4.294,4.294,0,0,1,3.152,1.155,4.337,4.337,0,0,1,1.172,3.235v3.961h3.994V16.626a6.551,6.551,0,0,0-.693-2.971,8.251,8.251,0,0,0-1.832-2.426,8.633,8.633,0,0,0-2.608-1.634A8.069,8.069,0,0,0,33.822,9M31.578,23.492H11.146A2.17,2.17,0,0,0,9,25.67v10.5a4.269,4.269,0,0,0,.281,1.551,3.741,3.741,0,0,0,.809,1.271,3.853,3.853,0,0,0,1.254.858,4.039,4.039,0,0,0,1.617.314h16.7a3.98,3.98,0,0,0,1.634-.33,3.987,3.987,0,0,0,2.145-2.244,4.535,4.535,0,0,0,.313-1.683V25.67a2.142,2.142,0,0,0-2.179-2.179" transform="translate(-7.504 -7.268)"></path>
   </g>
-</svg>
+</svg>

package/es/packages/graph-canvas/graph-model/node/logical-node/logical-element.js

@@ -15,16 +15,24 @@ import classNames from 'classnames';
 import { ReactSVG } from 'react-svg';
 import { useExperimentGraph } from "../../..";
 import { useObservableState } from "../../../../hooks/useObservableState";
+import { COMMONLY_USED } from "../../../node-types";
+import ORSvg from "./images/OR.svg";
+import ANDSvg from "./images/AND.svg";
+import XORSvg from "./images/XOR.svg";
+import lockingSvg from "./images/locking.svg";
+import unlockSvg from "./images/unlock.svg";
 import "./logical-element.less";
 var operatorUrl = {
-  '|': require("./images/OR.svg"),
-  '&': require("./images/AND.svg"),
-  '^': require("./images/XOR.svg"),
-  LOCK: require("./images/locking.svg"),
-  UNLOCK: require("./images/unlock.svg")
+  '|': ORSvg,
+  '&': ANDSvg,
+  '^': XORSvg,
+  LOCK: lockingSvg,
+  UNLOCK: unlockSvg
 };
 
 var LogicalElement = function LogicalElement(props) {
+  var _data$id, _data$id$split;
+
   var node = props.node,
       experimentId = props.experimentId;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
@@ -41,13 +49,27 @@ var LogicalElement = function LogicalElement(props) {
       activeNodeInstance = _useObservableState2[0];
 
   var nodeId = activeNodeInstance && activeNodeInstance.id;
+  var nodeType = data === null || data === void 0 ? void 0 : (_data$id = data.id) === null || _data$id === void 0 ? void 0 : (_data$id$split = _data$id.split('-')) === null || _data$id$split === void 0 ? void 0 : _data$id$split[0];
+  console.log('operatorxxxxxx666', nodeType, operator, data);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('logical-element', {
       selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: operator ? (operatorUrl === null || operatorUrl === void 0 ? void 0 : operatorUrl[operator]) || imgUrl : imgUrl,
-    className: "icon"
+    className: "icon",
+    style: {
+      marginLeft: operator === 'UNLOCK' ? 4 : 0
+    },
+    beforeInjection: function beforeInjection(svg) {
+      if (nodeType === COMMONLY_USED.LOCKED) {
+        svg.setAttribute('width', operator === 'UNLOCK' ? '35px' : '25px');
+        svg.setAttribute('height', operator === 'UNLOCK' ? '35px' : '30px');
+        svg.setAttribute('viewBox', operator === 'UNLOCK' ? '0 0 35 35' : '0 0 25 30');
+      } else {
+        svg.setAttribute('viewBox', '0 0 28 28');
+      }
+    }
   }));
 };